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

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

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

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

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

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

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

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

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

注入器/injector
注入器是AngularJS框架實現和應用開發(fā)的關鍵，這是一個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中維護一個集中的配方庫， 用來按需創(chuàng)建不同的組件。這個配方庫，其實就是一個Hash對象，key就是服務名稱，value 就是類定義。

在→_→的示例中，我們定義了一個簡單的服務類，這個服務類的實例就是一個字符串：“hello,world!”。 我們使用'ezHello'作為其服務名在注入器里注冊，并通過注入器將這個實例顯示出來。

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

創(chuàng)建一個新的注入器
可以使用angular.injector()創(chuàng)建一個新的注入器：

angular.injector(modules, [strictDi]); 獲取已經創(chuàng)建的注入器
如果AngularJS框架已經啟動，那么可以使用DOM對象的injector()方法獲 得已經創(chuàng)建的注入器：

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在執(zhí)行invoke()函數時，將待注入函數定義轉化為字符串，通過 正則表達式檢查其參數表，從而發(fā)現并注入所所依賴的服務對象：

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

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

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

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論