registering a service in angularjs (with typescript)

Question

i'm trying to build a web app with angularjs and typescript and i'm completly stuck at the attempt to inject a service into one of my controllers.

Service

var mod= angular.module("servicemodul", []);

class Service
{
http: ng.IHttpService;
q: ng.IQService;
private user: User;

static $inject = ["$http", "$q"];

constructor($http: ng.IHttpService, $q:ng.IQService)
{

}

}

mod.service('Service',["$http", "$q", function ($http, $q) {
return new Service($http, $q);
}]);

Controller

angular.module("app", ["servicemodul"])

class MainController
{

scope: ng.IScope;
http: ng.IHttpService;
service: Service;



static $inject = ["$scope", "$http", "Service"];

constructor($scope: ng.IScope, $http: ng.IHttpService, service: Service)
{
    this.http = $http;
    this.scope = $scope;
    this.Service= service;
    (<any>this.scope).Main = this;
}

public Init()
{

}
}

On loading the actual page the developer console displays:

 Unknown provider: ServicePorvider <- Service

The problem must be the part where the srevice is registered in the module, i have already tried the module.factory() method but it lead to the same error. I have also made sure that all the generated js files are loaded in the right order (services before controllers).

Another small question : does it even make sense to have different modules for services and controllers or is it possible to put everything into one module (assuming that the whole app is small)

Answer 1

You need to register the controller with the module:

var appMod = angular.module("app", ["servicemodul"])
appMod.controller('MainController',MainController); 

Otherwise the controller will not know of servicemodul