phần tiêm điều khiển góc vấn đề

Question

góc 1,5 giới thiệu components (loại đặc biệt của chỉ thị)

Đối với chỉ thị chúng ta có thể viết:

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

Làm sao chúng ta có thể viết tiêm cho các thành phần?

Chắc chắn tôi có thể viết, một cái gì đó như:

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

và:

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

Nhưng tôi muốn viết build-in điều khiển, như:

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

Minifying style được đề cập ở trên (GRUNT) sẽ phanh mã của tôi Unknown provider: aProvider <- a,

Vì vậy, cách viết đúng cách cho các thành phần?

Bất kỳ ý tưởng nào?

Bản demo tôi sử dụng Plunker

Answer 1

Bạn cần phải quấn controller: function($scope, $timeout) { trong cú pháp rút gọn.

Tôi thực sự không phải là một fan hâm mộ của các inline nhưng:

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

Cleaner dạng:

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


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

} 

tùy chọn thứ ba là sử dụng ng-chú thích và bạn có thể loại bỏ các dòng myComponentCtrl.$inject = ['$scope', '$timeout']; trên.

Answer 2

Bạn có thể tiếp tục và sử dụng ký hiệu mảng cho bộ điều khiển của mình.

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

    }] 
}); 

gì tôi thích làm tuy nhiên là sử dụng một công cụ như ng-annotate về xây dựng đường ống dẫn của tôi mà tự động chuyển đổi thuốc chích vào ký hiệu mảng, do đó, mã nguồn của bạn không cần phải lo lắng về điều đó.