實(shí)例解說AngularJS在自動(dòng)化測試中的應(yīng)用
（圖片來源于網(wǎng)絡(luò)）
1、AngularJS是一組用來開發(fā)web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI的組件；
2、AngularJS提供了一系列健壯的功能，以及將代碼隔離成模塊的方法；
3、AngularJS于2009年發(fā)布***個(gè)版本，由Google進(jìn)行維護(hù)，壓縮版94k。
1、在AngularJS中通過數(shù)據(jù)視圖雙向綁定實(shí)現(xiàn)視圖與業(yè)務(wù)邏輯解耦，這將提高代碼的可測試性；
2、遵循MVC模式開發(fā)，鼓勵(lì)視圖、數(shù)據(jù)、邏輯組件間松耦合；
3、將測試與應(yīng)用程序編寫放在同等重要的位置，在編寫模塊的同時(shí)編寫測試。因?yàn)楦鹘M件的松耦合，使得這種測試得以實(shí)現(xiàn)；
4、 應(yīng)用程序頁面端與服務(wù)器端解耦。兩方只需定義好通信API，即可并行開發(fā)。
問題：假設(shè)我們需要編寫一個(gè)手機(jī)列表，支持對手機(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ì)被檢測到，并且被執(zhí)行。這使得指令可以為DOM指定行為或者改變DOM的結(jié)構(gòu)。例如ng-controller、ng-src、ng-model等。
4.2 AngularJS的編譯
4.3 簡單的AngularJS指令寫法
自定義指令的一般格式：
angular.application(‘myApp’, []).directive(‘myDirective’,function(){
//一個(gè)指令定義對象
return{ }; //通過設(shè)置項(xiàng)來定義指令，在這里進(jìn)行覆寫
});下面我們來看一個(gè)簡單的自定義指令的例子：
-
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è)對象。默認(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)簽。
在AngularJS中，模塊負(fù)責(zé)組織、啟動(dòng)、實(shí)例化應(yīng)用。
模塊的兩個(gè)部分，一個(gè)是配置塊，另一個(gè)是運(yùn)行塊。
-
配置塊：在實(shí)例工廠（provider）注冊和配置階段運(yùn)行。只有工廠、常量才可以注入到配置塊中（常量的配置要放在前面）；
-
運(yùn)行塊：注入器(injector)被創(chuàng)建后執(zhí)行，被用來啟動(dòng)應(yīng)用。實(shí)例和常量、變量等都能被注入。
AngularJS應(yīng)用中的服務(wù)是一些用依賴注入捆綁在一起的、可替換的對象。這些對象可以提供一些封裝好的邏輯操作，以供調(diào)用。AngularJS內(nèi)置了很多有用的服務(wù)，例如前面提到的$timeout、$http等，我們可以通過使用內(nèi)置服務(wù)完成大部分業(yè)務(wù)邏輯。但很多時(shí)候我們還需要自定義服務(wù)：
服務(wù)的使用
上圖的代碼中定義了一個(gè)服務(wù)notify，它依賴另外一個(gè)服務(wù)$window。$window中封裝了window對象的方法，定義了一個(gè)控制器myController，并為這個(gè)控制器注入了notify服務(wù)，同時(shí)在控制器的scope中定義了一個(gè)方法callNotify來調(diào)用服務(wù)。$inject是依賴注入的一種方式，請參看下文依賴注入章節(jié)。
我們可以將需要的服務(wù)比作一件工具，比如一把錘子，那我們要怎么獲得錘子呢？
-
***種方法：自己打造一把錘子。如果錘子的工藝改變了，我們就需要重新制造。相當(dāng)于我們在程序中new了一個(gè)服務(wù)，服務(wù)的實(shí)現(xiàn)改變時(shí)，只能修改代碼，這將產(chǎn)生風(fēng)險(xiǎn)。
-
第二種方法：我們找到一間工廠，告訴工廠錘子的型號(hào)，然后工廠為我們制造。這時(shí)候就不需要關(guān)系錘子是怎么做的，我們只管使用。但是這種方式還是很麻煩，我們需要知道工廠在哪。類似于在代碼中通過工廠方法獲取我們想要的服務(wù)。這種方會(huì)對工廠產(chǎn)生依賴。
-
第三種方法：我們在門前貼張單子，聲明我們需要一把什么型號(hào)的錘子，第二天就有人默默地送來了一把錘子。這在現(xiàn)實(shí)生活中簡直是癡心妄想，但這種方式確實(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對于表單的支持。AngularJS內(nèi)置了表單的服務(wù)，可以大大提高開發(fā)效率。
3、指令的詳細(xì)定義方式。很多時(shí)候，簡單的指令寫法不能滿足需求，需要更深度的定制指令。
4、如何進(jìn)行測試。在AngularJS中，測試非常簡單，可以使用其它的測試庫進(jìn)行測試（如Jasmine）。
【本文是51CTO專欄機(jī)構(gòu)宜信技術(shù)學(xué)院的原創(chuàng)文章，微信公眾號(hào)“宜信技術(shù)學(xué)院( id: CE_TECH)”】
