Question

我学会了使用数组表示法编写所需的角度依赖关系，这样：

var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.stuff = 'stuff';
}]);

Angular文档遵循这种表示法，但我看到越来越多的教程不使用数组表示法，只是直接向控制器传递函数（$ scope）。

两种方法之间有什么区别吗？或者可能在第二版中实现了一个？

Answer 1

您应该使用数组表示法

明天说如果你想用uglify说缩小你的数据，它会缩小你的大变量名，但不会触及你的字符串所以你的陈述来自

带有数组表示法的案例1

原始

app.controller('MyCtrl', ['$scope', function($scope) {

缩小的

x.controller('MyCtrl', ['$scope', function(a) {

控制器确切地知道变量a是$scope

案例2没有数组表示法（如果您选择不使用它）

原始

app.controller('MyCtrl', function($scope) {

缩小的

x.controller('MyCtrl', function(a){

现在你的控制器不知道如何处理a变量，而不是$scope肯定

Answer 2

如果您计划缩小代码，数组表示法很重要，无论如何您应该在生产中进行此操作。坚持使用它。

Answer 3

如果您打算迷你应用程序，是的，您必须使用数组表示法。

这是因为变量已重命名，因此注入器不再知道您要注入的依赖项。

例如，如果在缩小时将$scope重命名为a则无效。

显然，这意味着您必须编写和维护更多代码。幸运的是，您可以在构建过程中自动执行此操作。

在我的项目中，我使用grunt和angular-templates。

Answer 4

是的，有区别。我建议继续使用数组表示法，因为如果应用程序被缩小，不使用它将破坏您的依赖项引用。有关详细信息，请阅读https://docs.angularjs.org/tutorial/step_05。

Answer 5

基本上你可以重命名变量而不影响注入的角度。正如其他人所说，专门用于缩小。

var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', function(s) {
    s.stuff = 'stuff';
}]);

Answer 6

数组表示法用于注入依赖项。这两者之间的区别在于，如果你不包含数组符号意味着你不需要任何依赖。

最佳做法是使用[]表示法，以便您可以随时在应用程序中包含依赖项。

Answer 7

简而言之，有两种方法可以在角度中使用依赖注入：隐式或显式。

隐含DI是.controller('MyCtrl', function(scope, dep1, dep2){

它不会给$ injector指示包含什么，它会做一些类似反射的东西来解决它。如果你缩小你的代码，它将变成

`.controller('MyCtrl', function(a, b, c){ `

这就是我们使用显式DI的原因。有几种方法可以这样做：

使用数组：.controller('MyCtrl', ['$scope','dep1','dep2', function($scope, dep1, dep2){

使用$inject：

.controller('MyCtrl', myCtrl)

myCtrl.$inject = ['$scope', 'dep1', 'dep2'] 

function myCtrl($scope, dep1, dep2) {}

在两种方式中，即使minification将函数参数重命名为某个东西，$ injector也会知道它应该注入什么，因为它在字符串文字中有原始名称（不受缩小影响）

您还可以使用注释注释来告诉编译器/转换器如何处理角度DI，即它会将隐式DI转换为显式，请参阅here

我个人更喜欢.$inject

的第二种方式

Answer 8

DI可以帮助您缩小代码，其他答案也解释了DI注入技术的工作原理。基本上没有DI注入技术是坏的。

但我宁愿不要担心这件事，因为其他人会照顾这件事。使用ng-annotate指令，这将使您能够直接在函数内使用依赖

如果你写了这样的代码

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) {
   //awesome code here
});

当您将此代码发送到minifier时，它会在

时添加对角度组件的依赖关系的数组注释

angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", 
  function($scope, $timeout) {
    //code here
  }
]);

来自文档

ng-annotate通过使用静态分析来识别公共代码图案。有些模式它不会也永远不会理解对于那些你可以使用显式ngInject注释的人，请参阅进一步向下。