angularjs 1.5 bileşen bağımlılık enjeksiyonu

Question

Bu newb gelebilir, ancak angularjs bileşeni için bu tutorial'u takip ediyorum.

Bileşenlerde yeniyim ve bu bileşene nasıl bir sabit Utils veya authService enjekte edebilirim?

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

Teşekkürler!

Answer 1

sadece tek başına bir denetleyici gibi bileşenin denetleyici içine hizmetlerini enjekte etmek gerekir:

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

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

Answer 2

Böyle bileşen denetleyiciye hizmetleri enjekte edebilir

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

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

veya böyle:

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

Kabul edilen yanıt minification güvenli değil. Sen de burada küçültme güvenli bağımlılık enjeksiyon notasyonu kullanabilirsiniz:

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

bir kelime:

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

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

Answer 4

Fabrika tarzı servisleri aşağıdaki sözdizimini kullanır Fonksiyonel stil programlama için işi alır of Dikkat: Bileşeniniz için ayarladığınız aynı bileşen hizmeti/fabrika, ayrıca ana kapsam ve diğer bileşen kapsamları dahil olmak üzere uygulamanızın herhangi bir yerinde de enjekte edilebilir (ve dolayısıyla erişilebilir) durumdadır. Bu güçlü ama kolayca suistimal edilebilir. Bu nedenle, bileşenlerin sadece kendi kapsamları içinde verileri değiştirmeleri tavsiye edilir, bu yüzden kimin neyi değiştirdiğine dair bir karışıklık yoktur. Daha fazlası için bkz. https://docs.angularjs.org/guide/component#component-based-application-architecture.
Bununla birlikte, daha önce bahsedilen bağlantıdaki tartışma bile, bağlanma nesnesini kullanırken '=''un iki yönlü bağlayıcı özellik değerinin uyarıcı kullanımını adreslemektedir. Bu nedenle, bileşen hizmetleri ve fabrikalar için aynı gerekçeler geçerli olmalıdır. Aynı hizmeti veya fabrikayı diğer bileşen kapsamlarında ve/veya üst kapsamda kullanmayı planlıyorsanız, ana hizmet kapsamınızın bulunduğu hizmet/fabrikayı kurmanızı veya hizmet/fabrikaların sizin istediğiniz yerde toplanmasını öneririm. Özellikle aynı servisi/fabrikayı kullanan çok sayıda bileşeniniz varsa. Bulmak zor olan bazı isteğe bağlı bileşen modülünde bulunmasını istemezsiniz.