2015-09-04 71 views
9

我是角度新人,想知道爲什麼以及何時應該注入所有我們需要的依賴項兩次。爲什麼我們在angularjs中兩次注入我們的依賴關係?

例子:

var analysisApp=angular.module('analysisApp',[]); 

analysisApp.controller('analysisController',function($scope,$http,$cookies,$state,globalService){ 

}); 

但是,我們也可以寫上面的代碼爲:

var analysisApp=angular.module('analysisApp',[]); 

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function($scope,$http,$cookies,$state,globalService){ 

}]); 

爲什麼?

+0

其依賴關係註釋請參閱https://docs.angularjs.org/guide/di –

+2

[Angularjs minify best practices]的可能重複(http://stackoverflow.com/questions/18782324/angularjs-minify-best -實踐) – SomeKittens

回答

13

這是爲了使應用程序minsafe

小心:如果您打算縮小您的代碼,您的依賴項名稱將被重命名並中斷您的應用程序。

當你(或可能),再壓縮所有文件,依賴被改爲像ab,...等

但是,當你使用數組和字符串就像第二個片段所示,string從不縮小,可以用於映射。所以,該應用程序知道a$scope(請參閱下面的示例)。

例子:

// The minified version 
var _ = angular.module('analysisApp', []); 

_.controller('analysisController', ['$scope', '$http', '$cookies', '$state', 'globalService', function (a, b, c, d, e) { 
    a.name = 'John Doe'; // Now a here is `$scope`. 
}]); 

Angular Docs

這裏是讓你的應用程序minsafe與咕嚕不錯article

對於微小最佳實踐:Angularjs minify best practice

2
var analysisApp=angular.module('analysisApp',[]); 

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function($scope,$http,$cookies,$state,globalService){ 

}]); 

在這種情況下,當u運行如下代碼上面的代碼可以成爲像

var analysisApp=angular.module('analysisApp',[]); 

analysisApp.controller('analysisController',['$scope','$http','$cookies','$state','globalService',function(a,b,c,d, e){ 

}]); 

在這種情況下a, b, c, d將相應holde的'$scope','$http','$cookies','$state','globalService'的refrence和事情將按預期工作。

'$scope','$http','$cookies','$state','globalService'不會因爲這些改變都是字符串作爲字符串不是微小改變

analysisApp.controller('analysisController',function($scope,$http,$cookies,$state,globalService){ 

}); 

但是在縮小之後這種情況下,它可能會成爲像

analysisApp.controller('analysisController',function(a, b, c, d, e){ 

}); 

現在像$scope and other所有角度的物體已經失去了意義而事情不會奏效。

3

通過對函數進行字符串化並檢測其參數,Angular中的依賴注入工作。這是非常脆弱的,尤其是在縮小代碼時,因爲這些變量名稱會被破壞,所以你的應用程序將會中斷。解決方法是使用字符串告訴Angular這些注入的名稱,該字符串不會被破壞。換句話說,如果你的代碼被精縮它應該是這樣的:

analysisApp.controller('analysisController', 
['$scope','$http','$cookies','$state','globalService', function(a,b,c,d,e) { 

}]); 

在幕後,角將匹配$scopea$httpb,等等。

另一種可能性是使用ngannotate,這是一種預處理器工具,可用於添加到構建過程中。它將採用第一個代碼,並將其轉化爲第二個代碼。

相關問題