web-dev-qa-db-fra.com

angularjs injection de dépendance à 1,5 composante

cela peut sembler newb, mais j'ai suivi ce tutorial pour le composant angularjs.

Je suis nouveau dans les composants et comment puis-je injecter une constante Utils ou authService à mon composant comme celui-ci?

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

merci!

angularjsangularjs-directiveangularjs-components
30
Hokutosei

Vous devriez être capable d'injecter des services dans le contrôleur de votre composant, exactement comme un contrôleur autonome:

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

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

Vous pouvez injecter des services au contrôleur de composant comme ceci:

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

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

ou comme ceci:

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

La réponse acceptée n'est pas sûre. Vous pouvez également utiliser la notation d'injection de dépendance de sécurité de minification:

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

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

Pour la programmation de style fonctionnel qui utilise les services de style Factory, la syntaxe suivante permet d’exécuter le travail:

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

Un mot de caution: Le même service/usine de composant que vous avez configuré pour votre composant est également injectable (et donc accessible) n'importe où dans votre application, y compris la portée parente et les autres portées de composant. Ceci est puissant mais peut être facilement abusé. Par conséquent, il est recommandé aux composants de ne modifier que les données dans leur propre périmètre afin d'éviter toute confusion quant aux personnes qui modifient quoi. Pour plus d'informations, voir https://docs.angularjs.org/guide/component#component-based-application-architecture .
Cependant, même la discussion dans le lien susmentionné ne concerne que l'utilisation Avec précaution de la valeur de la propriété de liaison bidirectionnelle de '='lors de l'utilisation de l'objet bindings. Par conséquent, le même raisonnement devrait s’appliquer aux services composants et aux usines. Si vous prévoyez d'utiliser le même service ou la même fabrique dans d'autres portées de composant et/ou dans la portée parente, je vous recommande de configurer votre service/fabrique à l'emplacement où se trouve votre portée parente ou à l'emplacement de votre ensemble de services/usines. Surtout si vous avez de nombreux composants utilisant le même service/usine. Vous ne voulez pas qu'il soit situé dans un module de composant quelconque qui serait difficile à trouver.

0
user5224681