實例解說AngularJS在自動化測試中的應用
（圖片來源于網絡）
1、AngularJS是一組用來開發web頁面的框架、模板以及數據綁定和豐富UI的組件；
2、AngularJS提供了一系列健壯的功能，以及將代碼隔離成模塊的方法；
3、AngularJS于2009年發布***個版本，由Google進行維護，壓縮版94k。
1、在AngularJS中通過數據視圖雙向綁定實現視圖與業務邏輯解耦，這將提高代碼的可測試性；
2、遵循MVC模式開發，鼓勵視圖、數據、邏輯組件間松耦合；
3、將測試與應用程序編寫放在同等重要的位置，在編寫模塊的同時編寫測試。因為各組件的松耦合，使得這種測試得以實現；
4、 應用程序頁面端與服務器端解耦。兩方只需定義好通信API，即可并行開發。
問題：假設我們需要編寫一個手機列表，支持對手機信息進行模糊搜索，且按指定字段排序，要怎么實現呢？
如上圖所示，幾乎沒有DOM操作，更專注于業務邏輯！
下面編寫HTML
編寫控制器Controller
PhoneListCtrl 控制器。例子中注入了$scope(數據模型)、$http(封裝了ajax的服務)這兩個服務都是angularjs內置服務，服務是可以自定義的。
$scope.phones = data; 在這個地方后臺返回的數據應用到了數據模型中，這時前臺UI會自動響應更新。
4.1 什么是指令？
指令是AngularJS用來擴展瀏覽器能力的技術之一。在DOM編譯期間，和HTML關聯著的指令會被檢測到，并且被執行。這使得指令可以為DOM指定行為或者改變DOM的結構。例如ng-controller、ng-src、ng-model等。
4.2 AngularJS的編譯
4.3 簡單的AngularJS指令寫法
自定義指令的一般格式：
angular.application(‘myApp’, []).directive(‘myDirective’,function(){
//一個指令定義對象
return{ }; //通過設置項來定義指令，在這里進行覆寫
});下面我們來看一個簡單的自定義指令的例子：
-
module：這個方法將新建一個模塊。AngularJS以模塊管理代碼。
-
directive：在模塊中新建指令，指定的方法在編譯步驟會被執行，執行后返回一個自定義的鏈接函數，這個鏈接函數在完成雙向綁定后執行。
-
Restrict：它告訴AngularJS這個指令在DOM中可以何種形式被聲明。E（元素）, A（屬性，默認值）, C（類名）。
-
scope ：可以被設置為true或一個對象。默認值是false。當scope設置為true時，會從父作用域繼承并創建一個新的作用域對象。有三種綁定策略@ = &。
-
Template：一段HTML文本，或一個可以接受兩個參數的函數，參數為tElement和tAttrs，并返回一個代表模板的字符串。
4.4 使用指令
-
ng-app="MyModule":在angularjs啟動時指定初始化的模塊(module)。當前指定的是自定義的模塊。
-
drink water="{{pureWater}}":調用自定義的drink指令，將$scope中的pureWater屬性賦值給指令中的water屬性。
-
drink可以是一個屬性，也可以是一個標簽。
在AngularJS中，模塊負責組織、啟動、實例化應用。
模塊的兩個部分，一個是配置塊，另一個是運行塊。
-
配置塊：在實例工廠（provider）注冊和配置階段運行。只有工廠、常量才可以注入到配置塊中（常量的配置要放在前面）；
-
運行塊：注入器(injector)被創建后執行，被用來啟動應用。實例和常量、變量等都能被注入。
AngularJS應用中的服務是一些用依賴注入捆綁在一起的、可替換的對象。這些對象可以提供一些封裝好的邏輯操作，以供調用。AngularJS內置了很多有用的服務，例如前面提到的$timeout、$http等，我們可以通過使用內置服務完成大部分業務邏輯。但很多時候我們還需要自定義服務：
服務的使用
上圖的代碼中定義了一個服務notify，它依賴另外一個服務$window。$window中封裝了window對象的方法，定義了一個控制器myController，并為這個控制器注入了notify服務，同時在控制器的scope中定義了一個方法callNotify來調用服務。$inject是依賴注入的一種方式，請參看下文依賴注入章節。
我們可以將需要的服務比作一件工具，比如一把錘子，那我們要怎么獲得錘子呢？
-
***種方法：自己打造一把錘子。如果錘子的工藝改變了，我們就需要重新制造。相當于我們在程序中new了一個服務，服務的實現改變時，只能修改代碼，這將產生風險。
-
第二種方法：我們找到一間工廠，告訴工廠錘子的型號，然后工廠為我們制造。這時候就不需要關系錘子是怎么做的，我們只管使用。但是這種方式還是很麻煩，我們需要知道工廠在哪。類似于在代碼中通過工廠方法獲取我們想要的服務。這種方會對工廠產生依賴。
-
第三種方法：我們在門前貼張單子，聲明我們需要一把什么型號的錘子，第二天就有人默默地送來了一把錘子。這在現實生活中簡直是癡心妄想，但這種方式確實很輕松，不需要考慮任何東西，我們只關注使用錘子。這就是程序里的依賴注入。只要聲明了需要什么，在使用的時候就可以得到什么。
6.1 AngularJS中的依賴注入
***種方式：通過方法參數名聲明依賴。這種方式不推薦使用，因為js文件壓縮后方法參數名會改變。
第二種方式：聲明一個數組，依賴列表放數組的前部，注入目標放數組***一個元素。推薦使用這個方法。
第三種方式：通過$inject屬性來聲明依賴列表。
1、$scope的生命周期，這是一個相當重要的內容。
2、AngularJS對于表單的支持。AngularJS內置了表單的服務，可以大大提高開發效率。
3、指令的詳細定義方式。很多時候，簡單的指令寫法不能滿足需求，需要更深度的定制指令。
4、如何進行測試。在AngularJS中，測試非常簡單，可以使用其它的測試庫進行測試（如Jasmine）。
【本文是51CTO專欄機構宜信技術學院的原創文章，微信公眾號“宜信技術學院( id: CE_TECH)”】
