angularjs 1,5 phụ thuộc thành phần tiêm

Question

điều này có thể âm thanh newb, nhưng tôi đã theo dõi này tutorial cho thành phần angularjs.

Tôi mới làm quen với các thành phần và làm cách nào để chèn một hằng số Utils hoặc authService vào thành phần của tôi như thế này?

app.component('tlOverallHeader', { 
    bindings: { 
     data: '=' 
    }, 
    templateUrl: 'js/indexTimeline/components/tl_overallHeader/templates/tl_overallHeader.html', 
    controller: function() { 
     this.ms = 'tlOverallheader!' 
    } 
}) 

cảm ơn!

Answer 1

Bạn sẽ có thể tiêm dịch vụ vào bộ điều khiển của thành phần của bạn giống như một bộ điều khiển độc lập:

controller: function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
} 

Answer 2

Bạn có thể tiêm dịch vụ cho điều khiển thành phần như thế này:

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: ['$scope', 'AppConfig', TestController] 
     }); 

    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

hay như thế này:

angular.module('app.module') 
     .component('test', { 
      templateUrl: 'views/someview.html', 
      bindings: { 
       subject: '=' 
      }, 
      controller: TestController 
     }); 

    TestController.$inject = ['$scope', 'AppConfig'] 
    function TestController(scope, config) { 
     scope.something = 'abc'; 
    } 

Answer 3

Câu trả lời được chấp nhận không được giảm thiểu an toàn. Bạn có thể sử dụng các ký hiệu dependency injection việc rút gọn-an toàn ở đây quá:

controller: ['Utils', 'authService', 
    function(Utils, authService) { 
    this.ms = 'tlOverallheader!' 

    authService.doAuthRelatedActivities().then(...); 
    }, 
] 

Answer 4

Đối chức năng lập trình theo phong cách trong đó sử dụng Factory dịch vụ phong cách cú pháp sau được công việc làm:

angular.module('myApp') 

.component('myComponent', { 
    templateUrl: 'myTemplate.html', 
    controller: ['myFactory', function(myFactory){ 
     var thisComponent = this; 
     thisComponent.myTemplatemsg = myFactory.myFunc(); 
    }] 
}) 


.factory('myFactory', [ function(){ 

    return { 
     myFunc: function(){ 
        return "This message is from the factory"; 
       } 
    }; 
}]);  

Một từ của thận trọng: Dịch vụ thành phần tương tự/nhà máy bạn thiết lập cho thành phần của bạn cũng có thể tiêm (và do đó có thể truy cập được) ở bất kỳ nơi nào khác trong ứng dụng của bạn bao gồm phạm vi gốc và phạm vi thành phần khác. Điều này là mạnh mẽ nhưng có thể dễ dàng bị lạm dụng. Do đó, các thành phần được khuyến cáo chỉ sửa đổi dữ liệu trong phạm vi của chính chúng nên không có sự nhầm lẫn nào về việc ai đang sửa đổi cái gì. Để biết thêm về điều này, hãy xem https://docs.angularjs.org/guide/component#component-based-application-architecture.
Tuy nhiên, ngay cả các cuộc thảo luận trong liên kết nói trên chỉ đề cập đến việc sử dụng cảnh báo giá trị thuộc tính hai chiều ràng buộc của '=' khi sử dụng đối tượng liên kết. Vì vậy, cùng một lý do nên áp dụng cho các dịch vụ thành phần và các nhà máy. Nếu bạn có kế hoạch sử dụng cùng một dịch vụ hoặc nhà máy trong phạm vi thành phần khác và/hoặc phạm vi phụ huynh, tôi khuyên bạn nên thiết lập dịch vụ/nhà máy nơi phạm vi cha mẹ cư trú hoặc nơi tập hợp các dịch vụ/nhà máy dự định của bạn. Đặc biệt nếu bạn có nhiều thành phần sử dụng cùng một dịch vụ/nhà máy. Bạn không muốn nó nằm trong một số mô-đun thành phần tùy ý mà khó có thể tìm thấy.