How to use/import http module?

Question

I\'ve been playing with Angular 2 Quickstart.

How can I use/import http module in Angular 2?

I\'ve looked at Angular 2 Todo\'s.js, but it doesn\'t use the ht

Answer 1

just run:

npm install --save  @angular/http

and then import via

import {HttpModule} from '@angular/http'

Answer 2

Much the same in Alpha 42, but it can be noted that Headers and HTTP_PROVIDERS also come from angular2/http.

import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

export class App {

  constructor(public http: Http) { }

  getThing() {
    this.http.get('http://example.com')
      .map(res => res.text())
      .subscribe(
        data => this.thing = data,
        err => this.logError(err),
        () => console.log('Complete')
      );
  }

}

More on this and how to use observables that get returned over here: https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

:)

Answer 3

1. We are working on a separate data persistence layer, that will cover HTTP. This is not finished yet.
2. Because of Zone in Angular 2 you can use any existing mechanism for fetching data. This includes XMLHttpRequest, fetch() and any other third party libraries.
3. XHR in the compiler is meant to be private, and we can change the API at any time and as such should not be used.

Answer 4

import {Http, Response} from '@angular/http';

Answer 5

Apart from all answers given below if i cover up with some additional points Here is Http how to use/import everything...

ANGULAR2 HTTP (UPDATED to Beta !!)

Firstly as clear from name we have to import http file in the index.html like this

<script src="node_modules/angular2/bundles/http.dev.js"></script>

or you can update this via CDN from here

then next step we have to import Http and HTTP_PROVIDERS from the bundles provided by angular.

but yes it is a good practice to provide HTTP_PROVIDERS in the bootstrap file because by using this way it provided on the global level and available for the whole project like following.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependency's
]);

and imports are from....

import {http} from 'angular2/http';

Consuming Rest API's or json using Http

Now along with the http we have some more options provided with the angular2/http i.e like Headers, Request, Requestoptions etc etc. which is mostly used while consuming Rest API's or temporary Json data. firstly we have to import all this like following:

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

sometimes we need to provide Headers while consuming API's for sending access_token and many more things that is done using this way:

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'));

now come to RequestMethods: bascially we use GET, POST but we have some more option you can refer here...

we can use use requestmethods by using RequestMethod.method_name

there are some more option for the API's for now i posted one example for POST request the help by using some important methods:

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

for more info i had found two best reference here.. and here...

Answer 6

I believe that now (alpha.35 and 36) is needed to be:

import {Http} from 'http/http';

Remember to add (since now is a separate file) the reference in your html: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js