angularjs 1.5 dipendenza dipendenza componente

Question

questo può sembrare newb, ma ho seguito questo tutorial per componente angularjs.

Sono nuovo ai componenti e come faccio a iniettare una costante Utils o authService nel mio componente in questo modo?

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

grazie!

Answer 1

Si dovrebbe essere in grado di iniettare i servizi nel controllo del componente, proprio come un controller standalone: ​​

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

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

Answer 2

è possibile iniettare servizi a controller di componente come questo:

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

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

o come questo:

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

La risposta accettata non è una minifrazione sicura. È possibile utilizzare la dipendenza notazione di iniezione minification-safe anche qui:

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

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

Answer 4

Per funzionale programmazione stile che utilizza fabbrica servizi di stile la sintassi seguente ottiene il lavoro fatto:

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

Una parola di Attenzione: Lo stesso servizio/fabbrica di componenti che è stato configurato per il componente è anch'esso iniettabile (e quindi accessibile) in qualsiasi altro punto della app, inclusi l'ambito genitore e altri scopi del componente. Questo è potente ma può essere facilmente abusato. Quindi, i componenti raccomandati modificano solo i dati all'interno del loro ambito, quindi non c'è confusione su chi sta modificando cosa. Per ulteriori informazioni su questo vedi https://docs.angularjs.org/guide/component#component-based-application-architecture.
Tuttavia, anche la discussione nel collegamento sopracitato affronta solo l'uso ammonitore del valore della proprietà di associazione a due vie di '=' quando si utilizza l'oggetto bind. Pertanto lo stesso ragionamento dovrebbe applicarsi ai servizi e alle fabbriche di componenti. Se si intende utilizzare lo stesso servizio o fabbrica in altri ambiti di componenti e/o nell'ambito genitore, è consigliabile configurare il servizio/fabbrica in cui risiede l'ambito principale o dove risiede la congregazione di servizi/fabbriche prevista. Soprattutto se hai numerosi componenti che utilizzano lo stesso servizio/fabbrica. Non vuoi che si trovi in ​​qualche modulo componente arbitrario di cui sarebbe difficile trovarlo.