Question

我是角色的新手，想知道为什么以及何时应该两次注入所有需要的依赖项。

示例：

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

}]);

为什么？

Answer 1

这是为了让应用 minsafe 。

小心：如果您计划缩小代码，您的依赖项名称将被重命名并破坏您的应用。

当您（或可能）缩小所有文件时，依赖项将替换为a，b等字样。

但是，当您使用数组和字符串之类的语法时，如第二个片段所示，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

使用Grunt让您的应用程序保持安全状态article非常好。

缩小最佳做法：Angularjs minify best practice

Answer 2

Angular中的依赖注入通过对函数进行字符串化并检测其参数来实现。这非常脆弱，尤其是在缩小代码时，因为这些变量名称会被破坏，因此您的应用程序将会中断。解决方法是告诉Angular这些注入的名称是一个字符串，不会被破坏。换句话说，如果你的代码被缩小，它将如下所示：

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

}]);

在幕后，Angular会将$scope与a，$http与b匹配，依此类推。

另一种可能性是使用ngannotate，这是一个预处理器工具，可以添加到您的构建过程中。它将采用第一个代码，并将其转换为第二个代码。

Answer 3

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

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

}]);

在这种情况下，当您缩小代码时，上面的代码可能会变成

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

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

}]);

在这种情况下，a, b, c, d会相应地尊重'$scope','$http','$cookies','$state','globalService'，并且事情会按预期运作。

'$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这样的角形物体都失去了意义，事情就不起作用了。

为什么我们在angularjs中两次注入依赖项？

3 个答案: