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,它可以幫你將以簡單方式註入的代碼自動轉換成數組註釋的方式,即能滿足你寫簡潔代碼的願望,又能避免壓縮出錯問題。

發佈留言