一尘不染

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

angularjs

我一直看到下面的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)
    {
    }]);

阅读 209

收藏
2020-07-04

共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
}]);

所以角就知道了abc代表。


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

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开发人员指南-
使用严格依赖注入》

2020-07-04