Crear servicios en Angular 2

Publicado en Jul 30, 2016

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.

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.

Y con esto ya sabemos crear un servicio y usarlo en Angular 2.