Sushant Yadav
Sushant Yadav

Reputation: 726

Inject Http manually in Angular 2

I have created a Base Model in which I have all the common functions to fetch data and post or put the data. Actually what a service does in Angular but I don't want a service.

Now what I am planning to do is The base model will extended by all the modules in my system each module having its base endpoint to get data from the API. Now here's the problem If I inject the Http service in base model and the user model extends the Base model, Now to create a object of base model I need to pass the object of Http which I am unable.

export class BaseModel {
constructor (http: Http) {}

fetch() {
let params = {
            "includes": this.includes,
            "page": page,
            "filters" : this.filters,
            "order" : this.orderDirection + this.orderColumn
        };

        return this.api.get("/"+this.endpoint, params)
            .map(
                (response: any) => {
                    let total = response.meta.total;
                    let current = response.meta.current;

                    let min = current - 5;
                    let max = current + 5;

                    if (min < 1) {
                        min = 1;
                    }

                    if (max > total) {
                        max = total;
                    }
                    else if (max < 10) {
                        if(total < 10) {
                            max = total;
                        }else {
                            max = 10;
                        }
                    }

                    let pages : number[] = [];

                    for (let i = min; i <= max; i++) {
                        pages.push(i);
                    }

                    this.pages = pages;

                    return response
                }
            );
}
}

Now my User Model

export class User extends BaseModel {

public id : number;
    public username : string;
    public email : string;
    public password : string;
    public passwordConfirmation : string;
    public details : UserDetail = new UserDetail();
    public type : string;
    public status : string;
    public profileImage : string;
    public profileImageUrl : string;
    public crop : Object = {};
    public lastLogin : string;
    public numberOfLogin : string;
    public joinDate : string;
    public registerType : string = "web";

    public static create(response : any) {

        if (response === undefined || response === null) {
            return response;
        }

        let details = new UserDetail();

        if (response.details) {
            details = UserDetail.create(response.details);
        }

        let user = new User(); //error parameter required
        user.id = response.id;
        user.username = response.username;
        user.email = response.email;
        user.status = response.status;
        user.type = response.type;
        user.details.id = response.details.id;
        user.details = details;
        user.profileImageUrl = response.profile_image_url;
        user.joinDate = response.created_at;
        user.registerType = response.register_type;

        return user;
    }

}

Upvotes: 9

Views: 4008

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657546

UPDATE (final)

constructor() {
  let injector = ReflectiveInjector.resolveAndCreate([
    Http,
    BrowserXhr,
    {provide: RequestOptions, useClass: BaseRequestOptions},
    {provide: ResponseOptions, useClass: BaseResponseOptions},
    {provide: ConnectionBackend, useClass: XHRBackend},
    {provide: XSRFStrategy, useFactory: () => new CookieXSRFStrategy()},
  ]);
  this.http = injector.get(Http);
}

ORIGINAL (RC.x)

constructor() {
  let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
  this.http = injector.get(Http);
}

This creates a new injector (independent of the one used by the rest of your Angular2 app. This isn't necessarily a problem, you just should be aware of it.

See also angular2 resolveAndCreate HTTP - missing HTTP_PROVIDERS in RC7

Upvotes: 15

Erik van Velzen
Erik van Velzen

Reputation: 7022

Ugly solution which works in Angular 2.1

import {ReflectiveInjector} from '@angular/core';
import {Http, HttpModule} from "@angular/http";

const providers = (<any>HttpModule).decorators[0].args[0].providers;
const injector = ReflectiveInjector.resolveAndCreate(providers);
const http = injector.get(Http);

Upvotes: 5

Related Questions