實例解說AngularJS在自動化測試中的應用

 

1、什麼是AngularJS ?

一、AngularJS是一組用來開發web頁面的框架、模板以及數據綁定和豐富UI的組件；

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

三、AngularJS於2009年發佈第一個版本，由Google進行維護，壓縮版94k。

2、AngularJS的核心思想

一、在AngularJS中經過數據視圖雙向綁定實現視圖與業務邏輯解耦，這將提升代碼的可測試性；

二、遵循MVC模式開發，鼓勵視圖、數據、邏輯組件間鬆耦合；

三、將測試與應用程序編寫放在同等重要的位置，在編寫模塊的同時編寫測試。由於各組件的鬆耦合，使得這種測試得以實現；

四、 應用程序頁面端與服務器端解耦。兩方只需定義好通訊API，便可並行開發。

3、簡單的栗子

問題：假設咱們須要編寫一個手機列表，支持對手機信息進行模糊搜索，且按指定字段排序，要怎麼實現呢？

如上圖所示，幾乎沒有DOM操做，更專一於業務邏輯！

下面編寫HTML 

編寫控制器Controller

PhoneListCtrl 控制器。例子中注入了$scope(數據模型)、$http(封裝了ajax的服務)這兩個服務都是angularjs內置服務，服務是能夠自定義的。

$scope.phones = data; 在這個地方後臺返回的數據應用到了數據模型中，這時前臺UI會自動響應更新。

4、指令

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能夠是一個屬性，也能夠是一個標籤。

5、模塊和服務

在AngularJS中，模塊負責組織、啓動、實例化應用。

模塊的兩個部分，一個是配置塊，另外一個是運行塊。

• 配置塊：在實例工廠（provider）註冊和配置階段運行。只有工廠、常量才能夠注入到配置塊中（常量的配置要放在前面）；

• 運行塊：注入器(injector)被建立後執行，被用來啓動應用。實例和常量、變量等都能被注入。

AngularJS應用中的服務是一些用依賴注入捆綁在一塊兒的、可替換的對象。這些對象能夠提供一些封裝好的邏輯操做，以供調用。 AngularJS內置了不少有用的服務，例如前面提到的$timeout、$http等，咱們能夠經過使用內置服務完成大部分業務邏輯。但不少時候咱們還須要自定義服務：

服務的使用

上圖的代碼中定義了一個服務notify，它依賴另一個服務$window。$window中封裝了window對象的方法，定義了一個控制器myController，併爲這個控制器注入了notify服務，同時在控制器的scope中定義了一個方法callNotify來調用服務。$inject是依賴注入的一種方式，請參看下文依賴注入章節。

6、依賴注入

咱們能夠將須要的服務比做一件工具，好比一把錘子，那咱們要怎麼得到錘子呢？

第一種方法：本身打造一把錘子。若是錘子的工藝改變了，咱們就須要從新制造。至關於咱們在程序中new了一個服務，服務的實現改變時，只能修改代碼，這將產生風險。

第二種方法：咱們找到一間工廠，告訴工廠錘子的型號，而後工廠爲咱們製造。這時候就不須要關係錘子是怎麼作的，咱們只管使用。可是這種方式仍是很麻煩，咱們須要知道工廠在哪。相似於在代碼中經過工廠方法獲取咱們想要的服務。這種方會對工廠產生依賴。

第三種方法：咱們在門前貼張單子，聲明咱們須要一把什麼型號的錘子，次日就有人默默地送來了一把錘子。這在現實生活中簡直是癡心妄想，但這種方式確實很輕鬆，不須要考慮任何東西，咱們只關注使用錘子。這就是程序裏的依賴注入。只要聲明瞭須要什麼，在使用的時候就能夠獲得什麼。

6.1 AngularJS中的依賴注入

第一種方式：經過方法參數名聲明依賴。這種方式不推薦使用，由於js文件壓縮後方法參數名會改變。

第二種方式：聲明一個數組，依賴列表放數組的前部，注入目標放數組最後一個元素。推薦使用這個方法。

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

7、文章裏沒有介紹但需去了解的

一、$scope的生命週期，這是一個至關重要的內容。

二、AngularJS對於表單的支持。AngularJS內置了表單的服務，能夠大大提升開發效率。

三、指令的詳細定義方式。不少時候，簡單的指令寫法不能知足需求，須要更深度的定製指令。

四、如何進行測試。在AngularJS中，測試很是簡單，可使用其它的測試庫進行測試（如Jasmine）。

做者：武貫祥

來源：宜信技術學院