HTTP angular

El siguiente post es continuación del resumen de Angular 2

En lo posts anteriores:

Cargábamos los datos localmente desde fichero.

Con el servicio http de angular obtendremos los datos a través internet.

Con HTTP podemos hacer peticiones GET, POST, PUT, DELETE las cuales las podemos hacer de dos formas distintas:

  • Mediante observables, como por ejemplo el método login:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthService {
    private backendUrl = process.env.BACKEND_URI;


    constructor(private http: Http) { }


    login(credentials: Credentials) {
      // console.log('cre', credentials);
        this.http.post(this.backendUrl + '/login', credentials)
            .map((res) => res.json())
            .subscribe(
            // We're assuming the response will be an object
            // with the JWT on an id_token key
            (data) => localStorage.setItem('jwtToken', data.jwtToken),
            (error) => console.log(error)
            );
    }

Como se observa importamos la librería @angular/http y la instanciamos en el constructor.
Tambíen necesitamos importar rxjs/add/operator/map para map en el observable.

  • Con Promesas
getHeroes() {
   this.heroService.getHeroes()
                    .subscribe(
                      heroes => this.heroes = heroes,
                      error =>  this.errorMessage = <any>error);
 }

Se ha de tener en cuenta que en nuestro modulo tenemos que añadir http como provider en ambos casos.

Para más info Http client angular