Inject service in controller with TypeScript in AngularJS not working

Question

i'll try to inject a service in my controller with TypeScript and angular JS. But not working. What's is the problem in my code ? It's my service the problem ? All function in my service is not accessible, all are undefined when i'll try in debug. There is my code.

Controller

module Controller {

    import Service = Services;

    export class UserCtrl implements Interface.IUserCtrl {

        private user: Model.User;
        private users: Model.User[];
        private userService: Service.UserService;

        static $inject = ['$scope','UserService'];

        constructor(userService: Service.UserService) {
            this.userService = userService;
        }

        public getUsers = () => {
            this.users = this.userService.findAll();
            return this.users;
        }
        public getUser = (name: string) => {
            return this.userService.find(name);
        }
    }

    app.controller('UserCtrl', Controller.UserCtrl);
}

Service

module Services {

    export class UserService implements Interface.IUserService {

        private users: Model.User[];

        constructor() {
            this.users = [new Model.User("Giunta", "Lucas", 26), new Model.User("Rousselet", "Céline", 26)];
        }

        public create = (user: Model.User) => {

        }
        public edit = (user: Model.User) => {

        }
        public remove = (user: Model.User) => {

        }
        public find = (name: string) => {
            for (let u of this.users) {
                if (u.name == name) {
                    return u;
                }
            }
        }
        public findAll = () => {
            return this.users;
        }

    }

    app.service('UserService', Services.UserService);
}

Can you try doing just app.service('UserService', UserService); instead of the fully qualified name Services.UserService? — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Mar 24, 2017 at 15:48

toskv · Accepted Answer · 2017-03-24 15:47:31Z

2

It's because you request both $scope and the UserService, but the constructor only accepts the later.

To fix it you should have the properties in the constructor in the same order as the ones in $inject.

    static $inject = ['$scope','UserService'];

    constructor($scope, userService: Service.UserService) {
        this.userService = userService;
    }

answered Mar 24, 2017 at 15:47

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben · Accepted Answer · 2017-03-24 15:58:22Z

0

As @toskv mentioned, you need to also inject $scope into your constructor.

The dependencies are in order, so with the way your code is now, the injector thinks that your injected UserService is $scope which is not what you want.

edited Mar 24, 2017 at 15:58

answered Mar 24, 2017 at 15:52

Ben

2,7261 gold badge15 silver badges16 bronze badges

2 Comments

toskv Over a year ago

I don't think the injector will blow up, he'll just end up with the injected $scope in the userService variable. :)

Ben Over a year ago

I got a bit dramatic with my explanation :)

Collectives™ on Stack Overflow

Inject service in controller with TypeScript in AngularJS not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related