current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 11 down vote favorite

this may sound newb, but I have been following this tutorial for angularjs component.

I am new to components and how do I inject a constant Utils or authService to my component like this?

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

update1: tried something like from directives, but not working..

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

        Utils.log(authService.isAuthed(), '')
    }

update2: working solution, fixed the ngAnnotate options

 // gulp
.pipe(ngAnnotate({ add: true, single_quotes: true }))

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

        Utils.log(authService.isAuthed(), '')
    }

thanks!

share|improve this question
up vote 13 down vote accepted

You should be able to inject services into your component's controller just like a standalone controller:

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

    authService.doAuthRelatedActivities().then(...);
}
share|improve this answer
    
Thanks! but I still get error, it won't work... Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-rc.1/$injector/unpr?p0=ePr‌​ovider%20%3C-%20e – Hokutosei Jan 20 at 4:23
4  
Unless you have a service called e, that looks like a minification issue, see stackoverflow.com/questions/21688681/… – mzulch Jan 20 at 4:26
    
sure it was.. fixed the ngAnnotate option, and it's now working.. thanks! – Hokutosei Jan 20 at 4:33
up vote 4 down vote

You can inject services to component controller like this:

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

    function TestController(scope, config) {
        scope.something = 'abc';
    }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.