国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
AngularJS自學(xué)之路(一)

AngularJS 是什么

AngularJS的官方文檔是這樣介紹它的。完全使用JavaScript編寫(xiě)的客戶端技術(shù)。同其他歷史悠久的Web技術(shù)(HTML、CSS和JavaScript)配合使用,使Web應(yīng)用開(kāi)發(fā)比以往更簡(jiǎn)單、更快捷。
AngularJS主要用于構(gòu)建單頁(yè)面Web應(yīng)用。它通過(guò)增加開(kāi)發(fā)人員和常見(jiàn)Web應(yīng)用開(kāi)發(fā)任務(wù)之間的抽象級(jí)別,使構(gòu)建交互式的現(xiàn)代Web應(yīng)用變得更加簡(jiǎn)單。
AngularJS的開(kāi)發(fā)團(tuán)隊(duì)將其描述為一種構(gòu)建動(dòng)態(tài)Web應(yīng)用的結(jié)構(gòu)化框架。
AngularJS使開(kāi)發(fā)Web應(yīng)用變得非常簡(jiǎn)單,同時(shí)也降低了構(gòu)建復(fù)雜應(yīng)用的難度。它提供了開(kāi)發(fā)者在現(xiàn)代Web應(yīng)用中經(jīng)常要用到的一系列高級(jí)功能,例如:

  • 解耦應(yīng)用邏輯、數(shù)據(jù)模型和視圖
  • Ajax服務(wù)
  • 依賴注入
  • 瀏覽歷史(使書(shū)簽和前進(jìn)、后退按鈕能夠像在普通Web應(yīng)用中一樣工作)
  • 測(cè)試
  • 更多功能

AngularJS是開(kāi)源的

最近在玩github,看到了有些項(xiàng)目license是MIT,我還以為是MIT(麻省理工學(xué)院),一問(wèn)我同事,才知道MIT意味著你可以為AngularJS貢獻(xiàn)代碼,使其變得更加優(yōu)秀。關(guān)于貢獻(xiàn)代碼的更多內(nèi)容可以在AngularJS的官網(wǎng)中查看“貢獻(xiàn)代碼”部分。不知道AngularJS官網(wǎng)的,可以百度(我從來(lái)不記官網(wǎng),都是百度的)。

第一個(gè)AngularJS程序——Hello World

<!DOCTYPE html><html ng-app><head>    <title>Simple app</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">    </script></head><body>    <input ng-model="name" type="text" placeholder="Your name">    <h1>Hello {{ name }}</h1></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

雖然這個(gè)例子不怎么有趣,但它展示了AngularJS最基本也最令人印象深刻的功能之一:數(shù)據(jù)綁定。
AngularJS則采用了完全不同的解決方案。它創(chuàng)建實(shí)時(shí)模板來(lái)代替視圖,而不是將數(shù)據(jù)合并進(jìn)模板之后更新DOM。任何一個(gè)獨(dú)立視圖組件中的值都是動(dòng)態(tài)替換的。這個(gè)功能可以說(shuō)是AngularJS中最重要的功能之一,也是讓我們只用10行代碼,并且在沒(méi)有任何JavaScirpt的情況下就可以寫(xiě)出Hello World的關(guān)鍵。
要實(shí)現(xiàn)這個(gè)功能,只要在HTML頁(yè)面中引用angular.js,并在某個(gè)DOM元素上明確設(shè)置ng-app屬性即可。ng-app屬性聲明所有被其包含的內(nèi)容都屬于這個(gè)AngularJS應(yīng)用,這也是我們可以在Web應(yīng)用中嵌套AngularJS應(yīng)用的原因。只有被具有ng-app屬性的DOM元素包含的元素才會(huì)受AngularJS影響。
自動(dòng)數(shù)據(jù)綁定使我們可以將視圖理解為模型狀態(tài)的映射。當(dāng)客戶端的數(shù)據(jù)模型發(fā)生變化時(shí),視圖就能反映出這些變化,并且不需要寫(xiě)任何自定義的代碼,它就可以工作。
在MVC(Model View Controller,模型?視圖?控制器)的世界里,控制器可以不必?fù)?dān)心會(huì)牽扯到渲染視圖的工作。這樣我們就不必再擔(dān)心如何分離視圖和控制器邏輯,并且也可以使測(cè)試變得既簡(jiǎn)單又令人愉悅。

數(shù)據(jù)綁定的最佳實(shí)踐

由于JavaScript自身的特點(diǎn),以及它在傳遞值和引用時(shí)的不同處理方式,通常認(rèn)為,在視圖中通過(guò)對(duì)象的屬性而非對(duì)象本身來(lái)進(jìn)行引用綁定,是Angular中的最佳實(shí)踐。

<!doctype html><html ng-app><head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script></head><body>    <div ng-controller="MyController">        <h1>Hello {{ clock.now }}!</h1>    </div>    <script type="text/javascript" src="js/app.js"></script></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在這個(gè)例子中,相比每秒鐘都更新$scope.clock,更新clock.now的值會(huì)是更好的選擇。

// 在app.js中function MyController($scope) {    $scope.clock = {        now: new Date()    };    var updateClock = function() {        $scope.clock.now = new Date()    };    setInterval(function() {        $scope.$apply(updateClock);    }, 1000);    updateClock();};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
AngularJs路由:ngRoute
AngularJS 路由:ng-route與ui-router
AngularJS開(kāi)發(fā)指南04:核心概覽 | AngularJS中文社區(qū)
AngularJS環(huán)境設(shè)置
AngularJS教程之二 雙向數(shù)據(jù)綁定
跟我學(xué)AngularJs:Service、Factory、Provider依賴注入使用與區(qū)別
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服