[[271012]]

（圖片來源于網(wǎng)絡(luò)）

 

一、什么是AngularJS ?

 

1、AngularJS是一組用來開發(fā)web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI的組件；

2、AngularJS提供了一系列健壯的功能，以及將代碼隔離成模塊的方法； 

3、AngularJS于2009年發(fā)布***個(gè)版本，由Google進(jìn)行維護(hù)，壓縮版94k。

 

二、AngularJS的核心思想

 

1、在AngularJS中通過數(shù)據(jù)視圖雙向綁定實(shí)現(xiàn)視圖與業(yè)務(wù)邏輯解耦，這將提高代碼的可測(cè)試性；

2、遵循MVC模式開發(fā)，鼓勵(lì)視圖、數(shù)據(jù)、邏輯組件間松耦合； 

3、將測(cè)試與應(yīng)用程序編寫放在同等重要的位置，在編寫模塊的同時(shí)編寫測(cè)試。因?yàn)楦鹘M件的松耦合，使得這種測(cè)試得以實(shí)現(xiàn)； 

4、 應(yīng)用程序頁面端與服務(wù)器端解耦。兩方只需定義好通信API，即可并行開發(fā)。

 

三、簡(jiǎn)單的栗子

 

問題：假設(shè)我們需要編寫一個(gè)手機(jī)列表，支持對(duì)手機(jī)信息進(jìn)行模糊搜索，且按指定字段排序，要怎么實(shí)現(xiàn)呢？

如上圖所示，幾乎沒有DOM操作，更專注于業(yè)務(wù)邏輯！

下面編寫HTML 

編寫控制器Controller

PhoneListCtrl 控制器。例子中注入了$scope(數(shù)據(jù)模型)、$http(封裝了ajax的服務(wù))這兩個(gè)服務(wù)都是angularjs內(nèi)置服務(wù)，服務(wù)是可以自定義的。

$scope.phones = data; 在這個(gè)地方后臺(tái)返回的數(shù)據(jù)應(yīng)用到了數(shù)據(jù)模型中，這時(shí)前臺(tái)UI會(huì)自動(dòng)響應(yīng)更新。

 

四、指令

 

4.1 什么是指令？

指令是AngularJS用來擴(kuò)展瀏覽器能力的技術(shù)之一。在DOM編譯期間，和HTML關(guān)聯(lián)著的指令會(huì)被檢測(cè)到，并且被執(zhí)行。這使得指令可以為DOM指定行為或者改變DOM的結(jié)構(gòu)。例如ng-controller、ng-src、ng-model等。

4.2 AngularJS的編譯

4.3 簡(jiǎn)單的AngularJS指令寫法

自定義指令的一般格式：

angular.application(‘myApp’, []).directive(‘myDirective’,function(){
//一個(gè)指令定義對(duì)象
return{ };  //通過設(shè)置項(xiàng)來定義指令，在這里進(jìn)行覆寫
});

下面我們來看一個(gè)簡(jiǎn)單的自定義指令的例子：

• module：這個(gè)方法將新建一個(gè)模塊。AngularJS以模塊管理代碼。

• directive：在模塊中新建指令，指定的方法在編譯步驟會(huì)被執(zhí)行，執(zhí)行后返回一個(gè)自定義的鏈接函數(shù)，這個(gè)鏈接函數(shù)在完成雙向綁定后執(zhí)行。

• Restrict：它告訴AngularJS這個(gè)指令在DOM中可以何種形式被聲明。E（元素）, A（屬性，默認(rèn)值）, C（類名）。

• scope ：可以被設(shè)置為true或一個(gè)對(duì)象。默認(rèn)值是false。當(dāng)scope設(shè)置為true時(shí)，會(huì)從父作用域繼承并創(chuàng)建一個(gè)新的作用域?qū)ο蟆Ｓ腥N綁定策略@ = &。

• Template：一段HTML文本，或一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，參數(shù)為tElement和tAttrs，并返回一個(gè)代表模板的字符串。

4.4 使用指令

• ng-app="MyModule":在angularjs啟動(dòng)時(shí)指定初始化的模塊(module)。當(dāng)前指定的是自定義的模塊。

• drink water="{{pureWater}}":調(diào)用自定義的drink指令，將$scope中的pureWater屬性賦值給指令中的water屬性。

• drink可以是一個(gè)屬性，也可以是一個(gè)標(biāo)簽。

 

五、模塊和服務(wù)

 

在AngularJS中，模塊負(fù)責(zé)組織、啟動(dòng)、實(shí)例化應(yīng)用。

模塊的兩個(gè)部分，一個(gè)是配置塊，另一個(gè)是運(yùn)行塊。

• 配置塊：在實(shí)例工廠（provider）注冊(cè)和配置階段運(yùn)行。只有工廠、常量才可以注入到配置塊中（常量的配置要放在前面）；

• 運(yùn)行塊：注入器(injector)被創(chuàng)建后執(zhí)行，被用來啟動(dòng)應(yīng)用。實(shí)例和常量、變量等都能被注入。

AngularJS應(yīng)用中的服務(wù)是一些用依賴注入捆綁在一起的、可替換的對(duì)象。這些對(duì)象可以提供一些封裝好的邏輯操作，以供調(diào)用。AngularJS內(nèi)置了很多有用的服務(wù)，例如前面提到的$timeout、$http等，我們可以通過使用內(nèi)置服務(wù)完成大部分業(yè)務(wù)邏輯。但很多時(shí)候我們還需要自定義服務(wù)：

服務(wù)的使用

上圖的代碼中定義了一個(gè)服務(wù)notify，它依賴另外一個(gè)服務(wù)$window。$window中封裝了window對(duì)象的方法，定義了一個(gè)控制器myController，并為這個(gè)控制器注入了notify服務(wù)，同時(shí)在控制器的scope中定義了一個(gè)方法callNotify來調(diào)用服務(wù)。$inject是依賴注入的一種方式，請(qǐng)參看下文依賴注入章節(jié)。

 

六、依賴注入

 

我們可以將需要的服務(wù)比作一件工具，比如一把錘子，那我們要怎么獲得錘子呢？

• ***種方法：自己打造一把錘子。如果錘子的工藝改變了，我們就需要重新制造。相當(dāng)于我們?cè)诔绦蛑衝ew了一個(gè)服務(wù)，服務(wù)的實(shí)現(xiàn)改變時(shí)，只能修改代碼，這將產(chǎn)生風(fēng)險(xiǎn)。 

• 第二種方法：我們找到一間工廠，告訴工廠錘子的型號(hào)，然后工廠為我們制造。這時(shí)候就不需要關(guān)系錘子是怎么做的，我們只管使用。但是這種方式還是很麻煩，我們需要知道工廠在哪。類似于在代碼中通過工廠方法獲取我們想要的服務(wù)。這種方會(huì)對(duì)工廠產(chǎn)生依賴。 

• 第三種方法：我們?cè)陂T前貼張單子，聲明我們需要一把什么型號(hào)的錘子，第二天就有人默默地送來了一把錘子。這在現(xiàn)實(shí)生活中簡(jiǎn)直是癡心妄想，但這種方式確實(shí)很輕松，不需要考慮任何東西，我們只關(guān)注使用錘子。這就是程序里的依賴注入。只要聲明了需要什么，在使用的時(shí)候就可以得到什么。

6.1 AngularJS中的依賴注入

***種方式：通過方法參數(shù)名聲明依賴。這種方式不推薦使用，因?yàn)閖s文件壓縮后方法參數(shù)名會(huì)改變。

第二種方式：聲明一個(gè)數(shù)組，依賴列表放數(shù)組的前部，注入目標(biāo)放數(shù)組***一個(gè)元素。推薦使用這個(gè)方法。

第三種方式：通過$inject屬性來聲明依賴列表。

 

七、文中沒有介紹但需去了解的

 

1、$scope的生命周期，這是一個(gè)相當(dāng)重要的內(nèi)容。

2、AngularJS對(duì)于表單的支持。AngularJS內(nèi)置了表單的服務(wù)，可以大大提高開發(fā)效率。

3、指令的詳細(xì)定義方式。很多時(shí)候，簡(jiǎn)單的指令寫法不能滿足需求，需要更深度的定制指令。

4、如何進(jìn)行測(cè)試。在AngularJS中，測(cè)試非常簡(jiǎn)單，可以使用其它的測(cè)試庫進(jìn)行測(cè)試（如Jasmine）。

【本文是51CTO專欄機(jī)構(gòu)宜信技術(shù)學(xué)院的原創(chuàng)文章，微信公眾號(hào)“宜信技術(shù)學(xué)院( id: CE_TECH)”】

戳這里，看該作者更多好文