ngclass - Inyección de dependencia angularjs 1.5 componente

ngclass angular 4

Question

Esto puede sonar como nuevo, pero he estado siguiendo este tutorial para el componente angularjs.

Soy nuevo en los componentes y ¿cómo puedo inyectar un authService o authService constante a mi componente como este?

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

¡Gracias!

Answer 1

Debería poder inyectar servicios en el controlador de su componente al igual que un controlador independiente:

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

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

Answer 2

La respuesta aceptada no es minificación segura. También puede utilizar la notación de inyección de dependencia segura para minificación aquí:

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

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

Answer 3

Para la programación de estilo funcional que utiliza servicios de estilo de fábrica , la siguiente sintaxis hace el trabajo:

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 advertencia: el mismo componente de fábrica / servicio que configuró para su componente también es inyectable (y, por lo tanto, accesible) en cualquier otra parte de su aplicación, incluido el ámbito principal y otros ámbitos de componentes. Esto es poderoso pero puede ser fácilmente abusado. Por lo tanto, se recomienda que los componentes solo modifiquen los datos dentro de su propio alcance para que no haya confusión sobre quién está modificando qué. Para obtener más información sobre esto, consulte https://docs.angularjs.org/guide/component#component-based-application-architecture .
Sin embargo, incluso la discusión en el enlace mencionado anteriormente solo aborda el uso preventivo del valor de propiedad de enlace bidireccional de ''='' cuando se usa el objeto de enlaces. Por lo tanto, el mismo razonamiento debe aplicarse a los servicios de componentes y fábricas. Si planea utilizar el mismo servicio o fábrica en otros ámbitos de componentes y / o el alcance de los padres, le recomiendo que configure su servicio / fábrica en el lugar donde reside el alcance de sus padres o donde residan su congregación de servicios / fábricas. Especialmente si tiene numerosos componentes que utilizan el mismo servicio / fábrica. No querrás ubicarlo en un módulo de componente arbitrario del cual sería difícil encontrarlo.

Answer 4

Puede inyectar servicios al controlador de componentes de esta manera:

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

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

o así:

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'';
    }