再談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執行個體注入。

例如：

 

  
var myModule = angular.module('myModule', []);   
  
 
  
myModule.factory('$alert', function($window) {   
  
 
  
    return {   
  
        alert: function(text) {   
  
            $window.alert(text);   
  
        }   
  
    };   
  
});   
  
 
  
var myController = function($scope, $alert) {   
  
    $scope.message = function(msg) {   
  
        console.log(msg);   
  
        $alert.alert(msg);   
  
    };   
  
};   
  
myModule.controller("myController", myController); 
 

在上面執行個體我利用已知的window服務建立了一個alert的服務.並利用注入到我們的controller使用.這裡採用的都是約定注入(根據參數名稱注入).

jsfiddle線上示範http://jsfiddle.net/whitewolf/zyA5B/7/

 

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

將上例代碼改變為如下:

代碼如下:

 

  
var myModule = angular.module('myModule', []);   
  
 
  
myModule.factory('$alert', ['$window', function($window) {   
  
 
  
    return {   
  
        alert: function(text) {   
  
            $window.alert(text);   
  
        }   
  
    };}]);   
  
 
  
var myController = function($scope, $alert) {   
  
    $scope.message = function(msg) {   
  
        console.log(msg);   
  
        $alert.alert(msg);   
  
    };   
  
};   
  
myController.$inject = ['$scope', '$alert'];   
  
myModule.controller("myController", myController);  
 

jsfiddle線上示範http://jsfiddle.net/whitewolf/zyA5B/8/

3：內聯注入：對於directives，factory，filter等特殊指令使用$inject標註注入使用不是那麼友好，angularjs特別增加了內聯注入。如上面的$alert服務

 

  
myModule.factory('$alert', ['$window', function($window) {   
  
 
  
   return {   
  
       alert: function(text) {   
  
       $window.alert(text);   
  
    }   
  
};}]);   
 

   在angularjs中我們可以在controller中實用DI特性，同時一些列的Factory 方法如directives, services, filters同樣可以實用內聯注入得到DI特性。

1：在controller中形如：

 

  
var MyController = function(dep1, dep2) {  
  
 
  
...  
  
 
  
}  
  
 
  
MyController.$inject = ['dep1', 'dep2'];  
  
 
  
   
  
 
  
MyController.prototype.aMethod = function() {  
  
 
  
...  
  
 
  
}  
  
 
 

2：Factory 方法注入形如：

 

 

  
angualar.module('myModule', []).  
  
 
  
config(['depProvider', function(depProvider){  
  
 
  
...  
  
 
  
}]).  
  
 
  
factory('serviceId', ['depService', function(depService) {  
  
 
  
...  
  
 
  
}]).  
  
 
  
directive('directiveName', ['depService', function(depService) {  
  
 
  
...  
  
 
  
}]).  
  
 
  
filter('filterName', ['depService', function(depService) {  
  
 
  
...  
  
 
  
}]).  
  
 
  
run(['depService', function(depService) {  
  
 
  
...  
  
 
  
}]);