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

有興趣的朋友能夠研究研究。