Best practice for dependency injection in an AngularJS service with TypeScript

Question

I find dependency injection for AngularJS services in TypeScript to be somewhat cumbersome. Currently, I define a factory method inside my service class, and have to repeat all dependency injection arguments three times:

class MyService {
    public static Factory($rootScope, myController) {       // 1st time
        return new MyService($rootScope, myController);     // 2nd time
    }
    constructor(public $rootScope, public myController) {}  // 3rd time
}
myModule.factory('myService', MyService.Factory);

I would like to do the following, but that does not seem to work:

class MyService {
    constructor(public $rootScope, public myController) {}  // only once
}
myModule.factory('myService', MyService);

This approach works fine for controllers, but not so for services. Is there a better way?

Thanks in advance!

basarat · Accepted Answer · 2013-11-22 01:34:02Z

6

You should user service not factory :

class MyService {
    constructor(public $rootScope) {}  // only once
}
myModule.service('myService', MyService);

answered Nov 22, 2013 at 1:34

basarat

278k61 gold badges475 silver badges528 bronze badges

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

1 Comment

Stanislav Berkov Over a year ago

Also note that 'myModule.service('myService', MyService);' must go after class declaration. Placing it before will make code compiling but causing errors in runtime (something like accessing prototype on undefined).

Saulo Vallory · Accepted Answer · 2013-11-21 16:08:55Z

1

You could simply use angular's injector to create your controller instead of having a factory method.

Here is a sample in typescript

/// <reference path='d.ts/DefinitelyTyped/angularjs/angular.d.ts' />

class MyCtrl {
  public phrase: string;
  constructor($window) {
    this.phrase = 'I was loaded by injector';
  }

  speak() {
    alert(this.phrase);
  }
}

function main() {
  var injector = angular.injector(['ng']);
  var ctrl = injector.instantiate(MyCtrl);
  ctrl.speak();
}

And a fiddler to prove it works: http://jsfiddle.net/UPv5j/3/

answered Nov 21, 2013 at 16:08

Saulo Vallory

1,0191 gold badge10 silver badges33 bronze badges

Collectives™ on Stack Overflow

Best practice for dependency injection in an AngularJS service with TypeScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related