AngularJS service injector error

Question

I'm trying to make use of my API with AngularJS; I made a service which I'm now trying to load into a controller, but I'm seeing some errors.

Unknown provider: ApiServiceProvider <- ApiService <- ManageIntranetController

I'm using TypeScript.

My service looks like this:

module Services {
    export class ApiService {

        getIntranetItems: (action: string) => any;

        constructor($scope, $http: ng.IHttpService) {

            this.getIntranetItems = (action: string) => {
                return $http({
                    method: "GET",
                    url: "https://localhost:44326/api/intranet/" + action,
                    headers: { 'Content-Type': 'application/json' }
                }).success(function (data) {
                    $scope.intranetItems = data;
                }).error(function (msg) {
                    alert("ERROR: " + msg);
                })
            };

        }
    }
}

And my controller looks like this:

/// <reference path="../services/apiservice.ts" />


module Controllers {
    export interface IManageIntranetController extends ng.IScope {

    }    

    export class ManageIntranetController {
        constructor($scope: IManageIntranetController, ApiService: Services.ApiService) {
            console.log(ApiService.getIntranetItems("get"));
        }
    }
}

Have you registered the service on your angular module? e.g. angular.module("myApp", []).service("ApiService", Services.ApiService); — devqon
– devqon, Commented Apr 21, 2016 at 11:24
Also, you cannot inject $scope into a service, that one is only for controllers and directives — devqon
– devqon, Commented Apr 21, 2016 at 11:27
@devqon I did not do that, but now I did I still keep receiving the same errors.. Oh okay, I'll change that. — peer
– peer, Commented Apr 21, 2016 at 11:31

devqon · Accepted Answer · 2016-04-21 11:31:15Z

Your error means that it does not know of the service "ApiService". You probably forgot to register it on your module:

angular.module("myApp", [])
    .controller("ManageIntranetController", Controllers.ManageIntranetController)
    .service("ApiService", Services.ApiService);

Also, your service won't work, because you cannot inject a $scope in it. Instead, do something like this:

export class ApiService {

    getIntranetItems: (action: string) => any;

    constructor($http: ng.IHttpService) {

        this.getIntranetItems = (action: string) => {
            return $http({
                method: "GET",
                url: "https://localhost:44326/api/intranet/" + action,
                headers: { 'Content-Type': 'application/json' }
            });
        };

    }
}

and in your controller:

ApiService.getIntranetItems("get").then((data) => {
    $scope.intranetItems = data;
});

DrinkBird · Accepted Answer · 2016-04-21 11:25:32Z

1

You still need to register your services/controllers with angular. For example, you register a controller like this:

angular
    .module('app')
    .controller('myCtrl', MyController); //where MyController is a TypeScript class

For services is a bit more complex. You either need to add a static function within your class which returns an instance, call that function when registering the service with angular, or (my personal preference), create a javascript function outside the Class like so:

function factory($q: ng.IQService): MyService {
    return new MyService($q);
}

angular
    .module('app')
    .factory('myService', factory);

answered Apr 21, 2016 at 11:25

DrinkBird

8348 silver badges17 bronze badges

Collectives™ on Stack Overflow

AngularJS service injector error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related