1. 程式人生 > >AngularJS的依賴注入方式

AngularJS的依賴注入方式

在定義controller,module,service,and directive時有兩種方式

方式一:

var myModule = angular.module('myApp', []);
    myModule.controller('myCtrl', ['$scope', 'Project', function($scope, Project) {

}]);

方式二:

var myModule = angular.module('myApp', []);
    function myCtrl($scope, Project) {
    }
myModule.controller('myCtrl'
, myCtrl);

這兩種方式在本質上並沒有什麼區別,不過方式二會造成作用域的汙染。
也許你還會意識到以上兩種定義方式裡的依賴注入的方式也有一些不一樣,下面簡單總結一下:

簡單注入方式(Simple injection method)

function myCtrl($scope,Project){};
myModule.controller('myCtrl', myCtrl);
//或者
myModule.controller(function($scope,Project){
})

AngularJs會掃描function的引數,提取引數的名稱(name)作為function的依賴,

所以這種方式要求保證引數名稱的正確性,但對引數的順序並沒有要求;

但是這種注入方式有一個問題,當我們將專案釋出到正式環境時都會壓縮我們的程式碼,這時function的引數可能會變成a,b,這就會導致我們的程式碼出現問題,下面兩種注入方式可以幫我們解決這個問題。

陣列註釋法(array-style notation)

myModule.controller('myCtrl', ['$scope', 'Preject', function($scope, Project) {

}])

每一個依賴的引數值(字串)都會以相同的順序存放在一個數組裡,陣列的值與後面的function引數一一對應

,這樣即使壓縮了也不會有什麼問題。

如果你不喜歡這種陣列註釋的定義方式,下面還有一種方式。

顯示呼叫function的$inject

AngularJs提供了一種向injector server通知你想要注入的依賴的方式
複製程式碼

function myCtrl(a, b) {
    //$scope, Project,故意改成a,b模擬壓縮後的情形
}
myCtrl.$inject = ['$scope', 'Project'];
myModule.controller('PhoneDetailCtrl', myCtrl);

如上,通過設定funciton的$inject屬性,可以達到依賴注入的效果;

最後,有一個第三方的外掛ng-min,它可以幫你將以簡單方式注入的程式碼自動轉換成陣列註釋的方式,即能滿足你寫簡潔程式碼的願望,又能避免壓縮出錯問題。