Angularjs 1.5 komponentowy wtrysk zależności

Question

może to brzmieć newb, ale podążałem za tym komponentem angularjs tutorial.

Jestem nowy w komponentach i jak wprowadzić ciągły Utils lub authService do mojego komponentu w ten sposób?

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

dziękuję!

Answer 1

powinien być w stanie wstrzyknąć usług do kontrolera komponentu jest jak samodzielny kontroler:

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

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

Answer 2

można wstrzyknąć usług dla kontrolera komponentu tak:

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

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

lub tak:

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

Przyjęta odpowiedź nie jest bezpieczna dla zminimalizowania. Można użyć notacji wstrzykiwania zależności minifikacji bezpieczny tutaj zbyt:

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

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

Answer 4

Dla Functional programowania stylu który wykorzystuje Fabryka usług style następującą składnię dostaje zadanie:

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

Słowo Uwaga: uwaga: Tę samą usługę/fabrykę, którą skonfigurowałeś dla swojego komponentu, można także wstrzykiwać (i tym samym jest dostępna) w dowolnym miejscu w Twojej aplikacji, w tym w zakresie nadrzędnym i innych zakresach komponentów. Jest to potężne, ale można go łatwo nadużywać. Dlatego zaleca się, aby komponenty modyfikowały tylko dane w ramach ich własnego zakresu, aby nie było zamieszania, kto modyfikuje co. Więcej informacji na ten temat można znaleźć pod adresem https://docs.angularjs.org/guide/component#component-based-application-architecture.
Jednak nawet dyskusja w powyższym łączu dotyczy tylko ostrzeżenia o użyciu dwukierunkowego wiązania wartości właściwości '=' podczas korzystania z obiektu powiązań. Dlatego te same argumenty powinny dotyczyć usług komponentów i fabryk. Jeśli planujesz korzystać z tej samej usługi lub fabryki w ramach innych zakresów komponentów i/lub zakresu nadrzędnego, polecam skonfigurować twoją usługę/fabrykę, w której rezyduje zasada nadrzędna lub miejsce, w którym przebywa zamierzony zbór usług/fabryk. Zwłaszcza jeśli masz wiele komponentów korzystających z tej samej usługi/fabryki. Nie chcesz, aby znajdował się w jakimś arbitralnym module komponentu, który byłby trudny do znalezienia.