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

IT技术 javascript angularjs dependency-injection
2021-03-14 21:53:59

我一直看到以下 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)
    {
    }]);
5个回答

数组语法将帮助您缩小/丑化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
}]);

所以 Angular 会知道什么abc代表什么


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

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

或者

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

这将在$inject注释代码时创建上述方法。


所以,注解主要有四种

  1. 隐式注解 ——第一个示例代码
  2. Inline Array Annotation - 第二个示例代码
  3. $inject 属性注解 ——$inject 方法
  4. $ngInject 注释注释 - @ngInject方法

ng-注释

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

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

这个“重复”是为了让它安全地缩小:

AngularJS - 控制器、依赖和缩小

如果不关心缩小,控制器声明会是什么样子?
2021-04-17 21:53:59

或者您可以使用以下语法,根据流行的 angular-styleguide https://github.com/johnpapa/angular-styleguide

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

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

}

您可以编写第一个版本,因为它只是省略了函数的参数,这些参数也可以通过arguments函数内部访问。因此,您可以避免重复,但对参数属性进行切片也不是很有效(与仅键入参数相比)。

正如其他人的回答所说,recipation 是为了使其安全地缩小。

第一个控制器语法可以使用 ngmin 之类的工具来缩小/丑化 javascript 代码。我不太确定您提供的第二个和第三个选项是否是创建控制器的可行选项,但在任何情况下它们都不会被正确缩小,因为工具现在不再是提供者。我建议使用选项 1 或选项 3(不带括号)来创建控制器。请注意,选项 3 不会被自动化工具正确缩小。

有关创建控制器的一些有用信息: AngularJS 开发人员指南 - 控制器

选项 3 不带括号

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