再談angularjs DI(Dependency Injection)

???? 在前面已經介紹了關于angularjs，以及擴展了一些jQuery ui的一些組件為angularjs的directive。在這里應進口007 在上篇留言我們來看看在angularjs中的DI特性。

??? DI：依賴注入，是一種軟件設計模式，應DIP依賴倒置原則，描述組件之間高層組件不應該依賴于底層組件。依賴倒置是指實現和接口倒置，采用自頂向下的方式關注所需的底層組件接口，而不是其實現。其應用框架則為IOC，在.net中有很多我們熟悉的IOC框架，如Unity，Castle windsor，Ninject，Autofact等等，其常常分為構造注入，函數注入，屬性注。同時在IOC和Service Locator(服務查找)，如果你想更多的了解IOC和DI請參見martin fowler的Inversion of Control Containers and the Dependency Injection pattern。

???? 回到angularjs：在框架中為我們提供了angular.injector(modules)DI注入注射器。但是在我們使用注入的時候常常是不需要關心具體的如何注入。我們只需要按照其規則書寫我們的angularjs代碼就會很容易的得到angularjs的DI特性，DI方式有三種：

1：推斷式注入：在angularjs中我們可以在我們需要注入的地方按照名稱注入，這里要求參數名稱必須和注入服務實例名稱相同，一種名稱約定。angularjs會提取參數名稱查找相應DI實例注入。

例如：

?1?var?myModule?=?angular.module('myModule',?[]);
?2?
?3?myModule.factory('$alert',?function($window)?{
?4?
?5?????return?{
?6?????????alert:?function(text)?{
?7?????????????$window.alert(text);
?8?????????}
?9?????};
10?});
11?
12?var?myController?=?function($scope,?$alert)?{
13?????$scope.message?=?function(msg)?{
14?????????console.log(msg);
15?????????$alert.alert(msg);
16?????};
17?};
18?myModule.controller("myController",?myController);?

在上面實例我利用已知的window服務新建了一個alert的服務.并利用注入到我們的controller使用.這里采用的都是約定注入(根據參數名稱注入).

jsfiddle在線演示http://jsfiddle.net/whitewolf/zyA5B/7/

2:標記注入:在angularjs中我們可以利用$inject標注DI注入,這里需要注入服務名稱的順序和構造參數名對應.這里可以解決以上約定的死板性.

將上例代碼改變為如下:

代碼如下:

?1?var?myModule?=?angular.module('myModule',?[]);
?2?
?3?myModule.factory('$alert',?['$window',?function($window)?{
?4?
?5?????return?{
?6?????????alert:?function(text)?{
?7?????????????$window.alert(text);
?8?????????}
?9?????};}]);
10?
11?var?myController?=?function($scope,?$alert)?{
12?????$scope.message?=?function(msg)?{
13?????????console.log(msg);
14?????????$alert.alert(msg);
15?????};
16?};
17?myController.$inject?=?['$scope',?'$alert'];
18?myModule.controller("myController",?myController);?