angularjs 1.5 injection d'un composant dépendant

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

je suis nouveau sur des composants et comment injecter une constante Utils ou authService à mon composante de ce genre?

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

merci!

25
demandé sur Hokutosei 2016-01-20 07:05:06
la source

4 ответов

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

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

    authService.doAuthRelatedActivities().then(...);
}
19
répondu mzulch 2016-01-20 07:17:41
la source

vous pouvez injecter des services à component controller 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';
    }
39
répondu Gondy 2017-02-22 10:34:24
la source

la réponse acceptée n'est pas minification sûre. Vous pouvez utiliser ici aussi la notation minification-safe dependency injection:

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

    authService.doAuthRelatedActivities().then(...);
  },
]
8
répondu user3380704 2017-07-21 21:34:01
la source

style Fonctionnel de la programmation qui utilise Usine style services la syntaxe suivante permet de faire 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";
                }
    };
}]);     

le mot attention: le même service/usine de composants que vous avez configuré pour votre composant est également injectable (et donc accessible) n'importe où ailleurs dans votre application, y compris le scope parent et d'autres scopes de composants. Ceci est puissant mais peut être facilement abusé. Par conséquent, il est recommandé composants seulement modifier les données il n'y a donc pas de confusion sur qui modifie quoi. Pour en savoir plus, voirhttps://docs.angularjs.org/guide/component#component-based-application-architecture .

Cependant, même la discussion dans le lien mentionné ci-dessus ne traite que mise en garde contre l'utilisation de la valeur de propriété de '=' en utilisant l'objet bindings. Par conséquent, le même raisonnement devrait s'appliquer pour les services de composants et d'usines. Si vous prévoyez sur l'utilisation de la même service ou usine dans d'autres domaines d'application des composants et/ou le domaine d'application parent je vous recommande de mettre en place votre service/usine là où votre domaine d'application parent réside ou là où votre communauté de services/usines prévue réside. Surtout si vous avez de nombreux composants utilisant le même service/usine. Vous ne voulez pas qu'il soit localisé dans un module de Composant arbitraire dont il serait difficile de trouver.

0
répondu user5224681 2017-11-20 06:52:13
la source