依賴注入（DI）的好處不再贅言，使用過(guò)spring框架的都知道。angularjs作為前臺(tái)js框架，也提供了對(duì)DI的支持，這是javascript/jquery不具備的特性。angularjs中與DI相關(guān)有angular.module()、angular.injector()、 $injector、$provide。對(duì)于一個(gè)DI容器來(lái)說(shuō)，必須具備3個(gè)要素：服務(wù)的注冊(cè)、依賴關(guān)系的聲明、對(duì)象的獲取。比如spring中，服務(wù)的注冊(cè)是通過(guò)xml配置文件的<bean>標(biāo)簽或是注解@Repository、@Service、@Controller、@Component實(shí)現(xiàn)的；對(duì)象的獲取可以ApplicationContext.getBean()實(shí)現(xiàn)；依賴關(guān)系的聲明，即可以在xml文件中配置，也可以使用@Resource等注解在java代碼中聲明。在angular中，module和$provide相當(dāng)于是服務(wù)的注冊(cè)；injector用來(lái)獲取對(duì)象（angular會(huì)自動(dòng)完成依賴的注入）；依賴關(guān)系的聲明在angular中有3種方式。下面從這3個(gè)方面，介紹下angular的DI。

1、angular.module()創(chuàng)建、獲取、注冊(cè)angular中的模塊

The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved。

// 傳遞參數(shù)不止一個(gè),代表新建模塊;空數(shù)組代表該模塊不依賴其他模塊
var createModule = angular.module("myModule", []);

// 只有一個(gè)參數(shù)(模塊名),代表獲取模塊
// 如果模塊不存在,angular框架會(huì)拋異常
var getModule = angular.module("myModule");

// true,都是同一個(gè)模塊
alert(createModule == getModule);

該函數(shù)既可以創(chuàng)建新的模塊，也可以獲取已有模塊，是創(chuàng)建還是獲取，通過(guò)參數(shù)的個(gè)數(shù)來(lái)區(qū)分。

angular.module(name, [requires], [configFn]);

name：字符串類型，代表模塊的名稱；

requires：字符串的數(shù)組，代表該模塊依賴的其他模塊列表，如果不依賴其他模塊，用空數(shù)組即可；

configFn：用來(lái)對(duì)該模塊進(jìn)行一些配置。

現(xiàn)在我們知道如何創(chuàng)建、獲取模塊了，那么模塊究竟是什么呢？官方的Developer Guide上只有一句話：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.現(xiàn)在我還不太理解，大致就是說(shuō)模塊是一些功能的集合，如控制器、服務(wù)、過(guò)濾器、指令等子元素組成的整體?，F(xiàn)在解釋不了，先遺留。

2、$provide和模塊的關(guān)系

The $provide service has a number of methods for registering components with the $injector. Many of these functions are also exposed on angular.Module.

之前提到過(guò)：module和provide是用來(lái)注冊(cè)服務(wù)到injector中的。查看官方的API，可以看到$provide提供了provide()、constant()、value()、factory()、service()來(lái)創(chuàng)建各種不同性質(zhì)的服務(wù)；angular.Module中也提供了這5個(gè)服務(wù)注冊(cè)方法。其實(shí)2者功能是完全一樣的，就是用來(lái)向DI容器注冊(cè)服務(wù)到injector中。

官方API下的auto有$provide 和 $injector，Implicit module which gets automatically added to each $injector.按照字面意思是說(shuō)，每一個(gè)injector都有這2個(gè)隱含的服務(wù)。但1.2.25版本中，感覺(jué)沒(méi)有辦法獲取injector中的$provide。不知道這是為什么?一般來(lái)說(shuō)也不需要顯示使用這個(gè)服務(wù)，直接使用module中提供的API即可。

var injector = angular.injector();
alert(injector.has("$provide"));//false
alert(injector.has("$injector"));//true

3、angular.injector()

使用angular.injector();也能獲取到注入器，但是沒(méi)有和模塊綁定。這種做法是沒(méi)有意義的，相當(dāng)于是你創(chuàng)建了一個(gè)空的DI容器，里面都沒(méi)有服務(wù)別人怎么用呢。正確的做法是，在創(chuàng)建注入器的時(shí)候，指定需要加載的模塊。

// 創(chuàng)建myModule模塊、注冊(cè)服務(wù)
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
  this.my = 0;
});

// 創(chuàng)建herModule模塊、注冊(cè)服務(wù)
var herModule = angular.module('herModule', []);
herModule.service('herService', function() {
  this.her = 1;
});

// 加載了2個(gè)模塊中的服務(wù)
var injector = angular.injector(["myModule","herModule"]);
alert(injector.get("myService").my);
alert(injector.get("herService").her);

如果加載了多個(gè)模塊，那么通過(guò)返回的injector可以獲取到多個(gè)模塊下的服務(wù)。這個(gè)例子中如果只加載了myMoudle，那么得到的injector就不能訪問(wèn)herMoudle下的服務(wù)。這里特別需要注意下：angular.injector()可以調(diào)用多次，每次都返回新建的injector對(duì)象。

var injector1 = angular.injector(["myModule","herModule"]);
var injector2 = angular.injector(["myModule","herModule"]);

alert(injector1 == injector2);//false

4、angular中三種聲明依賴的方式

angular提供了3種獲取依賴的方式：inference、annotation、inline方式。

// 創(chuàng)建myModule模塊、注冊(cè)服務(wù)
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
  this.my = 0;
});

// 獲取injector
var injector = angular.injector(["myModule"]);

// 第一種inference
injector.invoke(function(myService){alert(myService.my);});

// 第二種annotation
function explicit(serviceA) {alert(serviceA.my);};
explicit.$inject = ['myService'];
injector.invoke(explicit);

// 第三種inline
injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

其中annotation和inline方式，對(duì)于函數(shù)參數(shù)名稱沒(méi)有要求，是推薦的做法；inference方式強(qiáng)制要求參數(shù)名稱和服務(wù)名稱一致，如果JS代碼經(jīng)過(guò)壓縮或者混淆，那么功能會(huì)出問(wèn)題，不建議使用這種方式。

以上就是對(duì)Angular JS依賴注入的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論