为什么angularjs的控制器声明有这样的语法结构?

Question

我一直看到下面的angularjs控制器语法结构。

angular.module('7minWorkout').controller('WorkoutController', 
['$scope', '$interval', '$location', 
function ($scope, $interval, $location)
{
}]);

为什么参数名要重复?为什么不这样呢

angular.module('7minWorkout').controller('WorkoutController', 
    ['$scope', '$interval', '$location', 
    function ()
    {
    }]);

或

   angular.module('7minWorkout').controller('WorkoutController', 
    [ 
    function ($scope, $interval, $location)
    {
    }]);

Answer 1

数组语法将帮助您缩小/美化您的js代码。

angular.module('7minWorkout').controller('WorkoutController', 
  function ($scope, $interval, $location) {
    // code here
});

将被缩小和修改为:

angular.module('7minWorkout').controller('WorkoutController', 
 function (a, b, c) {
    // code here
});

这样Angular就无法判断该注入哪些依赖了

另一方面，使用array声明:

angular.module('7minWorkout').controller('WorkoutController', 
 ['$scope', '$interval', '$location', function ($scope, $interval, $location) {
    // code here
}]);

将被缩小为:

angular.module('7minWorkout').controller('WorkoutController', 
  ['$scope', '$interval', '$location', function (a, b, c) {
    // code here
}]);

这样Angular就知道a、b和c代表什么了。

---

还有另一种注入变量的方法，如果你使用下面的第一个示例代码:

WorkoutController.$inject = ['$scope', '$interval', '$location'];

或

angular.module('7minWorkout').controller('WorkoutController', /* @ngInject */
  function ($scope, $interval, $location) {
   // code here
});

，当代码被注释时，将创建上面提到的$inject方法。

---

所以，主要有四种注释:

1. 隐式注释-第一个示例代码
2. 内联数组注释-第二个示例代码
3. $inject属性注释- $inject方法
4. $ngInject注释注释- @ngInject方法

---

ng-annotate

像ng-annotate这样的工具可以让你在应用中使用隐式依赖注释，并在最小化之前自动添加内联数组注释。如果您决定采用这种方法，您可能希望使用ng-strict-di。

更多信息，参见AngularJS开发者指南-使用严格依赖注入。

Answer 2

这个"重复"是为了使它可以安全地缩小:

AngularJS -控制器、依赖项和最小化

Answer 3

或者你可以使用下面的语法，根据流行的angular-style指南https://github.com/johnpapa/angular-styleguide

angular.module('7minWorkout')
       .controller('WorkoutController', WorkoutController);
WorkoutController.$inject = ['$scope', '$interval', '$location'];
function WorkoutController($scope, $interval, $location) {
}

Answer 4

您可以编写第一个版本，因为它只是省略了函数的参数，这些参数也可以通过函数内部的arguments访问。因此，您可以避免重复，但分割参数属性也不是很有效(与直接键入参数相比)。

正如其他回答所述，重复是为了使其对最小化安全。

Answer 5

第一个控制器语法使得使用像ngmin这样的工具最小化/丑化javascript代码成为可能。我不太确定你提供的第二和第三个选项是否是创建控制器的可行选项，但无论如何，它们都不会被正确地缩小，因为工具不会知道提供者是什么。我建议使用选项1或选项3(没有括号)来创建控制器。注意，自动工具将不能正确地缩小选项3。

关于创建控制器的一些有用信息:AngularJS开发者指南-控制器

option3不带括号

angular.module('7minWorkout').controller('WorkoutController', function ($scope, $interval, $location)
    {
      //Your Code
    });