再談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/