Cliente HTTP y peticiones AJAX en Angular 2

Publicado en Sep 3, 2016

Hoy aprenderemos a utilizar el cliente HTTP y ver como hacer peticiones AJAX en Angular 2. Vamos directos a la práctica.

Modificamos el fichero app.module.ts para añadir el módulo HTTP y cargarlo en la aplicación de forma global.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

// Importamos el módulo http del paquete http de Angular
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent }       from './app.component';
import { routing, appRoutingProviders } from './app.routing';

import { PaisesComponent }    from './components/paises.component';

// Se lo pasamos a imports para que lo cargue en la aplicación
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule
  ],
  declarations: [
    AppComponent,
    PaisesComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule {
}

Ahora vamos a crear un servicio para tener dentro métodos que interactuen con un api o que hagan peticiones ajax.

// importamos el modulo Injectable de AngularJS
import { Injectable } from '@angular/core';

// Importamos los componentes que vamos a usar
import {Http, Response, Headers} from "@angular/http";
import "rxjs/add/operator/map";
import {Observable} from "rxjs/Observable";
 
// Permitimos que este objeto se pueda inyectar con la DI
@Injectable()
export class PaisesService {
 
   constructor(private _http: Http){}

   getPosts(){
        // petición por get a esa url de un api rest de pruebas
	return this._http.get("https://jsonplaceholder.typicode.com/posts")
							.map(res => res.json());
   }
	
 
}

Ahora definimos nuestro componente.

import { Component } from '@angular/core';

// Importamos la clase del servicio
import {PaisesService} from '../services/paises.service';

@Component({
  selector: 'paises',
  template: `
    <h2>Paises</h2>
    <ul>
    	<li>España</li>
    	<li>Mexico</li>
    	<li>Colombia</li>
    </ul>
    `,
    providers:[PaisesService]
})

export class PaisesComponent { 

    public posts;

    // cargamos el servicio
    constructor(private _paisesService: PaisesService){
       
 
                // Llamamos al método del servicio
                this._paisesService.getPosts()
									.subscribe(
										result => {
												this.posts = result;

												console.log(this.posts);
										},
										error => {
											this.errorMessage = <any>error;
											
											if(this.errorMessage !== null){
												console.log(this.errorMessage);
												alert("Error en la petición");
											}
										}
									);
    }
}

Este método nos mostrará un console log con todos los objetos que nos devuelve el servicio, que ya podríamos recorrer y mostrar en nuestra plantilla.

Esto es todo, ya sabemos usar de forma básica los servicios, el cliente http y como hacer peticiones AJAX con Angular 2. Te recomiendo mi curso de Angular 2 donde profundizamos en todo esto y hacemos una aplicación SPA basada en un API REST.