注入依賴到AngularJS服務

Question

儘管通讀上AngularJS服務的文檔，我經歷了這樣寫例如服務跌跌撞撞：

myApp.service('fooGetter', ['$http', function($http) { 
    this.getFoo = function() { 
     // use $http to get some foo 
    } 
}]); 

其中$http被注入到服務封裝，因此可以從服務中引用創建的實例。包含參數列表的數組語法的原因是什麼，然後將其複製到函數參數中？我一直無法找到對此目的的一個很好的解釋，它是規則，爲什麼它是必要的。相同的服務，沒有這樣寫，如：

myApp.service('fooGetter', function($http) { 
    this.getFoo = function() { 
     // use $http to get some foo 
    } 
}); 

似乎有一個完美的自動引用該變量。

Answer 1

如果使用沒有包含注入依賴項的數組的語法，則angular使用反射來讀取函數的參數。這通常可以正常工作，但如果你想縮小你的代碼，你的參數將改變名稱，角度將停止工作。使用數組語法符號將允許角度繼續查找正確的依賴關係，即使您的參數名稱更改。

此外，如果您的注入服務具有真正的長名稱，則可以使用數組語法注入它們，併爲它們在函數參數列表中使用一個更簡單的名稱。

例子：

app.controller("MyCtrl", ["MyReallyLongUserServiceName", function(User) { 
    User.doSomething(); 
}]); 

Answer 2

這個數組的語法是必要的，如果您計劃來縮小你的JS代碼，從而使注射仍然有效。事實上，縮小器將改變匿名函數參數的名稱，並且角度使用這個名稱來知道要注入到函數中的內容。這種替代語法通過將參數的名稱定義爲字符串來解決問題，這將不會被縮小器所觸及。

請注意，這在官方文檔page about dependency injection中進行了解釋。