为什么 AngularJS 控制器声明有这种语法结构？

我一直看到以下 AngularJS 控制器语法结构。

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

为什么参数名称重复？为什么不就这样

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

or

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

数组语法将帮助您缩小/丑化您的js code.

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 and c代表。

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

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

or

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

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

那么，主要有四种注解:

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

ng-注释

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

有关更多信息，请参阅AngularJS 开发人员指南 - 使用严格依赖注入.