在AngularJS中定義控制器的兩種方法？

Question

只見這兩個型動物圖案AngularJS定義控制器：

myApp.controller('myControllerName', function($scope) { 
    // ... my controller code ... 
}); 

和

myApp.controller('myControllerName', ['$scope', function($scope) { 
    // ... my controller code ... 
}]); 

在依賴注入，分別添加的參數。

這兩個編碼例程有什麼區別？我很想爲JavaScript和AngularJS低級方面提供詳細的答案。

Answer 1

第二種方法用於解決縮小問題。

由於角度推斷控制器的依賴從 參數名稱控制器的構造函數，如果你要 縮小爲PhoneListCtrl控制器的JavaScript代碼，它的所有 函數參數將精縮爲好，注入器的依賴關係將無法正確識別服務。

我們可以通過與名稱之間的依賴關係 ，作爲字符串提供，其將不會精縮

A Note on Minification

Answer 2

兩者都會做同樣的事情，但是當我們縮小代碼時，後者會很有用。

縮小代碼將縮短函數中的局部變量和參數名稱。 例如，您的代碼段將被改變爲如下縮小後：

myApp.controller('myControllerName', function(a) { 

}); 

，並根據參數名

myApp.controller('myControllerName', ['$scope', function(a) { 
    // ... my controller code ... 
}]); 

由於角注射服務，也不會找到名爲提供商'a'，所以它失敗了。

Answer 3

兩個例子都將有同樣的效果註釋功能克服了這個問題。使用第一種模式時Angular通過將函數轉換爲字符串來分析參數名稱。當使用第二種模式時，名稱明確提供爲字符串。

第二種模式很有用，因爲它是縮減生產代碼的良好實踐。任何好的minifier將重命名參數的標識，因此第一個例子最終會是這樣的：

a.controller('myControllerName',function(a){}); 

在這種情況下角將不再知道注入哪一個服務，因爲它會分析參數的名稱，得到a並嘗試注入a服務（可能存在也可能不存在，但絕對不是你想要的）。

第二個例子將minfiy到這樣的事情：

a.controller('myControllerName',['$scope',function(a){}]); 

這一次角將提供正確的服務。控制器功能a內部是對所提供服務的引用，所有內容都將按預期工作。