一、什麼是AngularJS ?

1、AngularJS是一組用來開發web頁面的框架、模板以及資料繫結和豐富UI的元件；

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

3、AngularJS於2009年釋出第一個版本，由Google進行維護，壓縮版94k。

二、AngularJS的核心思想

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）。

作者：武貫祥

來源：宜信技術