[Angular 2] Simple intro Http

To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component:

import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(App, [
    HTTP_PROVIDERS
]);

 

simple-request.ts:

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
@Component({
    selector: 'simple-request',
    template: `
        <button type="button" (click)="makeRequest()">Make Request</button>
        <div *ngIf="loading">loading...</div>
        <pre>{{data | json}}</pre>
    `
})

export class SimpleRequest{
    loading: boolean = false;
    data: Object;
    constructor(public http: Http){

    }

    makeRequest(){
        this.loading = true;
        this.http.request('https://api.github.com/users/zhentian-wan')
            .subscribe( (res: Response) => {
                this.data = res.json();
                this.loading = false;
            })
    }
}