怎樣解說(shuō)AngularJS在自動(dòng)化測(cè)試中的應(yīng)用

今天就跟大家聊聊有關(guān)怎樣解說(shuō)AngularJS在自動(dòng)化測(cè)試中的應(yīng)用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

一、什么是AngularJS ?

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

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

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

二、AngularJS的核心思想

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

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

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

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

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

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

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

下面編寫(xiě)HTML 

編寫(xiě)控制器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用來(lái)擴(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指令寫(xiě)法

自定義指令的一般格式：

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

下面我們來(lái)看一個(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í)行，被用來(lái)啟動(dòng)應(yīng)用。實(shí)例和常量、變量等都能被注入。

AngularJS應(yīng)用中的服務(wù)是一些用依賴注入捆綁在一起的、可替換的對(duì)象。這些對(duì)象可以提供一些封裝好的邏輯操作，以供調(diào)用。 AngularJS內(nèi)置了很多有用的服務(wù)，例如前面提到的$timeout、$http等，我們可以通過(guò)使用內(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來(lái)調(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)系錘子是怎么做的，我們只管使用。但是這種方式還是很麻煩，我們需要知道工廠在哪。類似于在代碼中通過(guò)工廠方法獲取我們想要的服務(wù)。這種方會(huì)對(duì)工廠產(chǎn)生依賴。

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

6.1 AngularJS中的依賴注入

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

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

第三種方式：通過(guò)$inject屬性來(lái)聲明依賴列表。

七、文章里沒(méi)有介紹但需去了解的

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

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

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

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

看完上述內(nèi)容，你們對(duì)怎樣解說(shuō)AngularJS在自動(dòng)化測(cè)試中的應(yīng)用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。