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);

這兩種方式在本質上並沒有什么區別，不過方式二會造成作用域的污染。

也許你還會意識到以上兩種定義方式里的依賴注入的方式也有一些不一樣，下面簡單總結一下：

1.簡單注入方式(Simple injection method)

function myCtrl($scope,Project){};

myModule.controller('myCtrl', myCtrl);

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

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

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

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

2.數組注釋法(array-style notation)

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

每一個依賴的參數值（字符串）都會以相同的順序存放在一個數組里，數組的值與后面的function參數一一對應，這樣即使壓縮了也不會有什么問題。

如果你不喜歡這種數組注釋的定義方式，下面還有一種方式。

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

ng-min地址：https://github.com/btford/ngmin

有興趣的朋友可以研究研究。