AngularJS應用開發思維之依賴注入3_AngularJS

找不到的API？
AngularJS提供了一些功能的封裝，但是當你試圖通過全域對象angular去 訪問這些功能時，卻發現與以往遇到的庫大不相同。

$http
比如，在jQuery中，我們知道它的API通過一個全域對象：$ 暴露出來，當你需要 進行ajax調用時，使用$.ajax()就可以了。這樣的API很符合思維的預期。

AngularJS也暴露了一個全域對象：angular，也對ajax調用進行封裝提供了一個 $http對象，但是，但是，當你試圖沿用舊經驗訪問angular.$http時，發現不是 那麼回事！

仔細地查閱$http的文檔，也找不到一點點的線索，從哪裡可以把這個$http拿到。

依賴注入/DI
事實上，AngularJS把所有的功能組件都以依賴注入的方式組織起來：

在依賴注入的模式下，所有的組件必須通過容器才能相互訪問，這導致了在AngularJS中， 你必須通過一個中介才能獲得某個組件的執行個體對象：

var injector = angular.injector(['ng']);injector.invoke(function($http){//do sth. with $http});

這個中介，就是依賴注入模式中的容器，在AngularJS中，被稱為：注入器。

在→_→的樣本中，我們可以看到，我們已經拿到了$http對象，它其實是一個函數。

注入器/injector
注入器是AngularJS架構實現和應用開發的關鍵，這是一個DI/IoC容器的實現。

AngularJS將功能分成了不同類型的組件分別實現，這些組件有一個統稱 - 供給者/provider， 下圖中列出了AngularJS幾個常用的內建服務：

AngularJS的組件之間不可以互相直接調用，一個組件必須通過注入器才 可以調用另一個組件。這樣的好處是組件之間相互解耦，對象的整個生命週期的管理 甩給了注入器。

注入器實現了兩個重要的功能：

集中儲存所有provider的配方
配方其實就是：名稱+類建構函式。AngularJS啟動時，這些provider首先使用其配方在注入器 內註冊。比如，http請求服務元件封裝在$httpProvider類內，它通過'$http'這個名字在注入 器內註冊。

按需提供功能組件的執行個體
其他組件，比如一個使用者的控制器，如果需要使用http功能，使用'$http'這個名字 向注入器請求，就可以獲得一個http服務執行個體了。

試著修改→_→的代碼，查看下$compile服務到底是什嗎？

註冊服務元件
從injector的角度看，組件就是一個功能提供者，因此被稱為供給者/Provider。 在AngularJS中，provider以JavaScript類（建構函式）的形式封裝。

服務名稱通常使用一個字串標識，比如'$http'代表http調用服務、'$rootScope'代表根 範圍對象、'$compile'代表編譯服務...

Provider類要求提供一個$get函數（類工廠），injector通過調用該函數， 就可以獲得服務元件的執行個體。

名稱和類函數的組合資訊，被稱為配方。injector中維護一個集中的配方庫， 用來按需建立不同的組件。這個配方庫，其實就是一個Hash對象，key就是服務名稱，value 就是類定義。

在→_→的樣本中，我們定義了一個簡單的服務類，這個服務類的執行個體就是一個字串：“hello,world!”。 我們使用'ezHello'作為其服務名在注入器裡註冊，並通過注入器將這個執行個體顯示出來。

獲得注入器對象
要使用AngularJS的功能，必須首先擷取注入器。有兩種方法取得注入器。

建立一個新的注入器
可以使用angular.injector()建立一個新的注入器：

angular.injector(modules, [strictDi]); 擷取已經建立的注入器
如果AngularJS架構已經啟動，那麼可以使用DOM對象的injector()方法獲 得已經建立的注入器：

var element = angular.element(dom_element);
var injector = element.injector();

通過注入器調用API
注入器有兩個方法可供進行API調用：invoke()和get()。

invoke()
使用注入器的invoke()方法，可以直接調用一個使用者自訂的函數體，並通過函數參數 注入所依賴的服務物件，這是AngularJS推薦和慣例的用法：

angular.injector(['ng']).invoke(function($http){//do sth. with $http}); get()

也可以使用注入器的get()方法，獲得指定名稱的服務執行個體：

var my$http = angular.injector(['ng']).get('$http');//do sth. with my$http

→_→的樣本這次使用了get()方法直接擷取一個服務執行個體，感受一下！

注入的方式和原理
有兩種方法告知注入器需要注入的服務物件：參數名注入和依賴數組注入。

參數名注入
AngularJS在執行invoke()函數時，將待注入函數定義轉化為字串，通過 Regex檢查其參數表，從而發現並注入所所依賴的服務物件：

//myfunc通過參數表聲明這個函數依賴於'$http'服務var myfunc = function($http){//do sth. with $http};injector.invoke(myfunc);//myfunc的定義將被轉化為字串進行參數名檢查

這樣有一個問題，就是當我們對JavaScript代碼進行壓縮處理時，$http可能會被 變更成其他名稱，這將導致注入失敗。

依賴數組注入
AngularJS採用依賴項數組的方法解決代碼壓縮混淆產生的問題。這時傳入invoke()的 是一個數組，數組的最後一項是實際要執行的函數，其他項則指明需要向該函數注入 的服務名稱。注入器將按照數組中的順序，依次向函數注入依賴對象。

採用這種方法，待注入函數的參數表的名稱就無關緊要了：

//myfunc依賴於'$http'和'$compile'服務var myfunc = ['$http','$compile',function(p1,p2){//do sth. with p1($http),p2($compile)}];injector.invoke(myfunc);

→_→的執行個體這次採用依賴數組的方法注入了ezHello服務執行個體，可以改改參數名稱 看有沒有影響結果？

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。