AngularJS (1.5) dependency injection into models classes (typescript)

Question

I am trying to use typescript to build an angularjs (1.5) application.

I want to make the equivalent of a factory that calls a model (which can take parameters).

I could do the following if I were to do it in pure JS

angular.module('test', [])
    .factory('Talker', [$q, function($q){
      return Talker()

      function Talker(name) {
        this.name = name || 'Bobuel Johnson'; 
      }
      Talker.prototype.deferredHello = function(){
        $q.when('Hi, I\'m ' + this.name);
      }
    }])

Now I want to do this in typescript such that I can have the Talker class but I want to be able to inject (in this case) $q into the model class.

Please, can you help me figure out how to get this set up as the typescript equivalent?

toskv · Accepted Answer · 2016-06-27 20:06:33Z

2

I would recommend using a service recipe instead of a factory, if only to prepare for angular2. A TypeScript rewrite of that js code would look something like this.

class Talker {
  public static $inject = ['$q']; // configure angular di
  private name: string = 'Some talker';  

  constructor(private $q) {}

  public deferredHello() {
    this.$q.when('Hi, I\'m ' + this.name);
  }
}

angular.module('test').service('Talker', Talker);

You can find the translation to js here.

If a factory is absolutely needed you should be able to do that as well like this:

class Talker {

  private name: string = 'Some talker';

  constructor(private $q) {}

  public deferredHello() {
    this.$q.when('Hi, I\'m ' + this.name);
  }
}

angular.module('test').service('Talker', function($q) {
  return new Talker($q);
});

You can check out the generated javascript here.

If you need to create multiple instances of Talker you can do it this way.

class Talker {

  private name: string = 'Some talker';

  constructor(private $q, money: number) {}

  public deferredHello() {
    this.$q.when('Hi, I\'m ' + this.name);
  }
}

angular.module('test').service('Talker', function($q) {
  // we can ask for more parameters if needed
  return function talkerFactory(money) { // return a factory instead of a new talker

    return new Talker($q, money);
  };

});

angular.module('yatest').service('Organiser', function(Talker) {
  let talker = Talker(42); // will call talkerFactory and return a new instance of talker 
})

The example for that is here.

edited Jun 27, 2016 at 20:06

answered Jun 24, 2016 at 20:01

toskv

31.8k7 gold badges77 silver badges77 bronze badges

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

4 Comments

ThinkBonobo Over a year ago

thanks for your advice! I'm not really sure how I could provide the model as a service since the service is a singleton and I'll require several instances of the model, Moreover the Talker model have problems if I wanted to feed it parameters while instantiating. Do you recommend that I use the factory version that you mentioned or is there a better way?

toskv Over a year ago

there is a pattern for creating multiple instances of something from a service, you can use it, just return a function that when called will return a new instance of the class. I'll add an example for that as well. github.com/angular/angular.js/issues/2708

timothy.B Over a year ago

A little late to the party but this answer should be marked as valid!

toskv Over a year ago

@timothy.B thanks for the comment but it's really up to the OP if the answer was a solution to his problem. I hope it helped you.

Collectives™ on Stack Overflow

AngularJS (1.5) dependency injection into models classes (typescript)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related