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代码进行缩小/ uglify。

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方法。

因此，主要有四种Here is the JSFiddle demo：

annotation - 第一个示例代码
Implicit Annotation - 第二个示例代码
Inline Array Annotation - $ inject方法
$ ngInject注释注释 - $inject Property Annotation方法

NG-注释

像@ngInject这样的工具允许您在应用中使用隐式依赖注释，并在缩小之前自动添加内联数组注释。如果您决定采用此方法，则可能需要使用ng-strict-di。

有关详细信息，请参阅ng-annotate。

Answer 2

这＆＃34;重复＆＃34;是为了使其缩小安全：

devel version

Answer 3

或者您可以根据流行的angular-styleguide https://github.com/johnpapa/angular-styleguide

使用以下语法

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

function WorkoutController($scope, $interval, $location) {

}

Answer 4

您可以编写第一个版本，因为它只省略了函数的参数，这些参数也可以通过函数内的O(2^n)访问。所以你会避免重复，但切片参数属性也不是很有效（相比之下只需输入参数）。

正如其他人的答案所述，重申是为了使其缩小安全。

Answer 5

第一个控制器语法可以使用ngmin等工具缩小/ uglify javascript代码。我不太确定你提供的第二和第三个选项是否可行创建一个控制器，但无论如何它们都不会被正确缩小，因为这些工具现在不会是提供者。我建议使用选项1或选项3（不带括号）来创建控制器。请注意，自动化工具不会正确缩小选项3。

有关创建控制器的一些有用信息： AngularJS Developer Guide - Controllers

选项3不带括号

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

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

5 个答案:

NG-注释