为什么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
}]);

所以角就知道了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-注释

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

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