angularjs 1.5 Komponentenabhängigkeit Injektion

Question

das klingt vielleicht newb, aber ich habe diese tutorial für angularjs Komponente folgen.

Ich bin neu bei Komponenten und wie injiziere ich eine konstante Utils oder authService meiner Komponente so?

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

danke!

Answer 1

Sie sollten in der Lage sein Dienststellen in Ihrer Component-Controller zu injizieren wie ein Standalone-Controller:

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

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

Answer 2

Sie können wie diese Dienste Component-Controller injizieren:

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

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

oder so:

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

Die akzeptierte Antwort ist nicht minifikationssicher. Sie können die Verkleinerungssichere Dependency Injection Notation hier verwenden:

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

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

Answer 4

Für funktionalen Stil Programmierung die Fabrik Stil Dienste die folgende Syntax verwendet bekommt den Job getan:

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

Ein Wort of caution: Die gleiche Komponente Service/Factory, die Sie für Ihre Komponente eingerichtet haben, ist auch injizierbar (und damit zugänglich) an anderer Stelle in Ihrer App, einschließlich des übergeordneten Bereichs und anderer Komponentenbereiche. Das ist mächtig, kann aber leicht missbraucht werden. Daher wird empfohlen, dass Komponenten nur Daten in ihrem eigenen Umfang ändern, damit es keine Verwirrung darüber gibt, wer was ändert. Weitere Informationen hierzu finden Sie unter https://docs.angularjs.org/guide/component#component-based-application-architecture.
Aber selbst die Diskussion in der oben genannten Link Adressen nur die Vorsichtshinweis Verwendung der Zwei-Wege-Bindung Eigenschaft Wert von '=' bei der Verwendung der Bindings-Objekt. Daher sollte die gleiche Argumentation für Komponentendienste und Fabriken gelten. Wenn Sie beabsichtigen, den gleichen Service oder die gleiche Factory in anderen Komponentenbereichen und/oder dem übergeordneten Bereich zu verwenden, empfehle ich, Ihren Service/Ihre Factory dort einzurichten, wo sich Ihr übergeordneter Bereich befindet oder wo sich Ihre beabsichtigte Versammlung von Services/Fabriken befindet. Vor allem, wenn Sie zahlreiche Komponenten mit demselben Service/derselben Fabrik haben. Sie wollen nicht, dass es sich in irgendeinem beliebigen Komponentenmodul befindet, das schwer zu finden wäre.