javascript - 为什么 angularjs Controller 声明具有这种语法结构？

Question

我一直看到以下 angularjs Controller 语法结构。

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 无法确定要注入(inject)哪些依赖项

另一方面，使用 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 代表什么。

---

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

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

或

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

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

---

所以，主要有四种annotation :

1. > Implicit Annotation - 第一个示例代码
2. > Inline Array Annotation - 第二个示例代码
3. > $inject Property Annotation - $注入(inject)方法
4. $ngInject 注释注解 - @ngInject方法

---

ng-注释

类似 ng-annotate 的工具让您在应用程序中使用隐式依赖注释，并在缩小之前自动添加内联数组注释。如果您决定采用这种方法，您可能需要使用 ng-strict-di。

有关详细信息，请参阅 AngularJS Developer Guide - Using Strict Dependency Injection .