Angular 组件控制器注入问题答案

【问题标题】：Angular component controller injection issueAngular 组件控制器注入问题
【发布时间】：2016-02-26 20:33:28
【问题描述】：

Angular 1.5 引入了components（特殊类型的指令）

对于指令我们可以这样写：

app.directive('myDirective',
            ['$timeout','$mdToast','$rootScope',  // <-- injection
            function ($timeout, $mdToast,$rootScope) {
return {
   link: {},
    //...
        }
    }

我们如何为组件编写注入？

我肯定会写，比如：

app.component('myComponent',  {
            restrict: 'E',
            bindings: {
                data: '='
            },
            templateUrl: 'template.html',
            controllerAs: 'vm',
            controller: 'myComponentCtrl'
    });

和：

app.controller('myComponentCtrl', 
    ['$scope',  '$timeout', 
     function ($scope, $timeout) {
   // ....
}]);

但我想写内置控制器，比如：

app.component('myComponentCtrl', {
  templateUrl: 'template.html',
  controller: function($scope, $timeout) {
    //...
  }
});

上面提到的样式缩小（GRUNT）会破坏我的代码Unknown provider: aProvider <- a，

那么如何为组件编写正确的注入？

有什么想法吗？

我使用的演示Plunker

【问题讨论】：

标签： angularjs

【解决方案1】：

您需要将controller: function($scope, $timeout) { 包装在缩小语法中。

我其实不是内联的粉丝，但是：

app.component('myComponentCtrl', {
 templateUrl: 'template.html',
 controller: ['$scope', '$timeout', function($scope, $timeout) {
  //...
 }]
});

更简洁的表格：

app.component('myComponentCtrl', {
 templateUrl: 'template.html',
 controller: myComponentCtrl
})


myComponentCtrl.$inject = ['$scope', '$timeout'];
/* @ngInject */
function myComponentCtrl($scope, $timeout) {
  //...

}

第三个选项是使用 ng-annotate，您可以删除上面的 myComponentCtrl.$inject = ['$scope', '$timeout']; 行。

【讨论】：

是的，第一个选项是非常丑陋的形式，同意ng-annotate。
我喜欢更简洁的例子，但我无法理解。在实际创建对象之前，您如何在 myComponentCtrl 上设置 $inject 属性？此外，您将控制器分配给在实际声明控制器功能之前声明的组件。那将如何运作？我认为更干净的示例中缺少某些内容。
@Liviu Google“javascript 提升”。 TL;DR：JavaScript var 和 function 声明被“提升”到范围的顶部，因此您可以在代码中的任何位置声明一个函数，并以与在当前代码开头声明它的方式相同的方式访问它范围。

【解决方案2】：

您可以继续为您的控制器使用数组表示法。

app.component('myComponent',  {
    restrict: 'E',
    bindings: {
        data: '='
    },
    templateUrl: 'template.html',
    controllerAs: 'vm',
    controller: ['$scope', function ($scope) {

    }]
});

然而，我更喜欢在我的构建管道上使用像 ng-annotate 这样的工具，它会自动将您的可注入对象转换为数组表示法，因此您的源代码无需担心这一点。

【讨论】：