I have a typescript class representing a model and I would like instances to municate with an API via angular's Http service.

But the constructor of the model needs arguments when creating instances. For example something super simple:

class SomeModel{
    constructor(public id:number, public name:string, ){
    }

I would like to inject the Http service so it is available to my instances, but it seems like the canonical way to do this mandeers the constructor with:

constructor(http:Http)

I've been digging through the Injector docs, but it's a little sparse and I haven't found anything that works. Is there a way to get a reference to a service like Http from the DI system without using the constructor pattern?

I have a typescript class representing a model and I would like instances to municate with an API via angular's Http service.

But the constructor of the model needs arguments when creating instances. For example something super simple:

class SomeModel{
    constructor(public id:number, public name:string, ){
    }

I would like to inject the Http service so it is available to my instances, but it seems like the canonical way to do this mandeers the constructor with:

constructor(http:Http)

I've been digging through the Injector docs, but it's a little sparse and I haven't found anything that works. Is there a way to get a reference to a service like Http from the DI system without using the constructor pattern?

• javascript
• dependency-injection
• angular

• Maybe you could use provide, like when testing Http, but it's ugly (; I'd keep models clean and leave fetching to the ponents/services... – Sasxa Commented Jan 22, 2016 at 1:16
• Thanks, I appreciate that @Sasxa. The application is a bunch of different kinds of nodes that are saved to a graph DB via an API. Each kind of node has a slightly different requirement and it works well to model this as subclasses of an abstract node class. To save I can just say nodeInstance.save() rather than having a bunch of logic in a service to determine what kind of node it is and how to save/retrieve it and it's relationships. It's possible it's a wrongheaded approach, but it seems sustainable to me if I could find a nicer way to get the Http reference. – Mark Commented Jan 22, 2016 at 1:30
• I've been looking through docs, specifically http and xhrbackend, maybe this will work for you... – Sasxa Commented Jan 22, 2016 at 1:34
• I don't think Angular was meant to be used like this, but you got me curious. Are you trying to do some kind of Domain Model Architecture in client side? As for what you are trying to do, just annotate your Model class with @Injectable and receive the http object in the constructor just like you would with any other @Component, there's also an @Inject annotation that you can use in the specific property you want to inject. – Langley Commented Jan 22, 2016 at 1:34
• 1 Oh then it doesn't matter that you are using Neo4J, you are just accessing an http API, this works for me: console.log(Injector.resolveAndCreate(HTTP_PROVIDERS).get(Http).post); you might want to play around with the different options: angular.io/docs/ts/latest/api/core/Injector-class.html – Langley Commented Jan 22, 2016 at 3:21

2 Answers 2

I managed to solve the same problem using angular 4. First you create new injector that uses ponent injector. It knows about your SomeModel class and passes modelParams as instance of SomeModelParameters class. Then you use this newly created injector to create class instance.

@Injectable()
class SomeModel {
    constructor(http: Http, someModelParamters: SomeModelParameters) { }
}

export class MyComponent {
    constructor(injector: Injector) {
        const modelParams = new SomeModelParameters();
        const injectorWithModelParams = ReflectiveInjector.resolveAndCreate(
            [
                SomeModel,
                { provide: SomeModelParameters, useValue: modelParams }
            ],
            injector);
        this.someModel = injectorWithModelParams.resolveAndInstantiate([SomeModel]);
    }
}

update

HTTP_PROVIDERS is long gone. HttpClientModule is the current replacement.

original

If you inject a class that has constructor parameters the @Injectable annotation needs to be added.

@Injectable() 
class SomeModel{
   // constructor(public id:number, public name:string, ){
    // }
    constructor(http:Http) {} 
} 

For this to work HTTP_PROVIDERS needs to be added to bootstrap(AppComponent, [HTTP_PROVIDERS]);

See also Angular2 beta - bootstrapping HTTP_PROVIDERS - "Unexpected Token <"

If you need to pass other arguments from your ponent, youcoud pass them using a function instead.

Another way is to create the instance manually and request Http from the injector.

export class MyComponent {
  constructor(injector: Injector) {
    this.someModel = new SomeModel(Injector.resolveAndCreate(Http), 1, 2);

   } 
}