Servicios y módulo HTTP en Angular 2 Final

Publicado en Feb 18, 2017

Los servicios en Angular 2 son clases que básicamente nos van a servir para realizar acciones concretas, por ejemplo proveer de datos al componente, hacer peticiones al servidor, o realizar una lógica compleja fuera del componente.

Crear un servicio básico en Angular 2

Veamos como crear un servicio en Angular 2.

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

// Permitimos que este objeto se pueda inyectar con la DI
@Injectable()
export class PeliculasService {

  // Definimos un método que recibe un parámetro y devuelve un string
  getPelicula(puntuacion: number) {
    let pelicula = "Batman v Superman - Puntuación: "+puntuacion;
    return pelicula;
  }

}

Ahora vamos a utilizar el servicio en nuestro componente principal.

// Importar el núcleo de Angular
import {Component} from '@angular/core';

// Importamos la clase del servicio
import {PeliculasService} from './services/peliculas.service';
 
/* Decorador component, indicamos en que etiqueta se va a cargar la plantilla, y le indicamos que como provider utilice el servicio que hemos creado */
@Component({
    selector: 'my-app',
    template: `
                <h1>{{pelicula_conseguida}}</h1>
	`,
    providers:[PeliculasService]
})
 
// Clase del componente donde irán los datos y funcionalidades
export class AppComponent { 
	
	public pelicula;
        public pelicula_conseguida;
	
        // Definimos una propiedad para el servicio y se la pasamos al constructor
	constructor(private _peliculasService: PeliculasService){
		this.pelicula = {id: 1, titulo: "La verdad duele", anio: 2016};

                // Llamamos al método del servicio
                this.pelicula_conseguida = this._peliculasService.getPelicula(8);
	}

}

Si abrimos la aplicación en el navegador nos mostrará el texto que devuelve el método del servicio.

Con esto ya sabemos crear un servicio y usarlo de forma básica en Angular 2.

Módulo HTTP y peticiones AJAX en Angular 2

Veamos ahora como 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 y utilizamos el servicio, también podriamos cargarlo en los providers del app.module.ts dentro del decorador @NgModule.

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.