为什么 angularjs 控制器声明有这种语法结构? [英] Why do angularjs controller declaration have this syntax structure?

问题描述

我一直看到以下 angularjs 控制器语法结构.

I see the following angularjs controller syntax structure all the time.

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

为什么参数名称重复?为什么不只是这样

Why the repetition in the parameter names? Why not just like this

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

或

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

推荐答案

数组语法将帮助您缩小/丑化 js 代码.

The array syntax will help you with minification/uglify of your 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 将无法确定要注入哪些依赖项

So Angular won't be able to figure out which dependencies to 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 代表什么.

So Angular will know what a, b and c represent.

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

There's also another way to inject variables if you use your first example code like below:

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

或

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

当代码被注解时，它会创建上面提到的$inject方法.

which will create the $inject method mentioned above when the code is annotated.

所以，注解主要有四种:

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

1. Implicit Annotation - the first example code
2. Inline Array Annotation - the second example code
3. $inject Property Annotation - the $inject method
4. $ngInject Comment Annotation - the @ngInject method

---

ng-注释

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

---

ng-annotate

Tools like ng-annotate let you use implicit dependency annotations in your app and automatically add inline array annotations prior to minifying. If you decide to take this approach, you probably want to use ng-strict-di.

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

For more information, see AngularJS Developer Guide - Using Strict Dependency Injection.

这篇关于为什么 angularjs 控制器声明有这种语法结构?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！