Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Introducción a Angular 2 (parte III) – Servicios

Si quieres leer la versión más actualizada de este artículo, sigue este enlace

Siguiendo con la introducción a Angular 2 que empecé hace unos días, hoy le llega el turno a los servicios.

Servicios

Los servicios -pieza fundamental de AngularJS- siguen siendo imprescindibles en Angular 2, si bien en Angular 2 se definen a través de simples clases. Todo valor, función o característica que nuestra aplicación necesita, desde constantes a la lógica de negocio, se encapsula dentro de un servicio.

Los Componentes son grandes consumidores de servicios. No recuperan datos del servidor, ni validan inputs de usuario, ni logean nada directamente en consola. Delegan todo este tipo de tareas a los Servicios.

Los servicios deberían contener/hacer algo muy específico. Por ejemplo, serían susceptibles de encapsular en un servicio:

  • Servicio de logging
  • Servicio de datos
  • Bus de mensajes
  • Cálculo de Impuestos
  • Configuración de la app

A diferencia de AngularJS, en Angular 2 los servicios no tienen una sintaxis específica, son simples Clases

Veamos un ejemplo de servicio de logging muy simple, que proporciona varios métodos para mostrar información por consola:

//app/shared/logger.service.ts
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Definamos ahora otro servicio, que gestiona nuestra lista de tareas pendientes y que además hace uso del anterior:

//app/todos/shared/todo.service.ts
import {Injectable} from '@angular/core';
import { Todo } from './todo.model';
import { Logger } from '../../shared/logger.service';

@Injectable()
export class TodoService{

    todos:Todo[] = [];

    constructor(public logger: Logger){}

    addTodo(todo:Todo){
        this.todos = [...this.todos, todo];
        this.logger.log(this.todos);
    }

    getTodos(){
        this.logger.log(this.todos);
        return this.todos;
    }

}

Las dos piezas clave aquí son:

  • @Injectable: Este decorador avisa a Angular de que el servicio espera utilizar otros servicios y genera los metadatos que necesita el servicio para detectar la Inyección de Dependencias (DI) en el constructor. No es necesario ponerlo si nuestro servicio no tiene DI de otros servicios, pero es recomendable para evitar errores si en el futuro queremos añadirle alguna dependencia.

  • Dependency Injection (DI) en el Constructor: Aquí aprovechamos las bondades de TypeScript para pasar explícitamente un objeto tipo Logger en el constructor de TodoService. De este modo, Angular es capaz de inferir la Inyección de Dependencias. En el apartado Dependency Injection que veremos en el próximo artículo te explicaré más en detalle este tema.

Los Guide Lines de Angular recomiendan utilizar siempre el decorador @Injectable al definir nuestros servicios.

Finalmente hay que aclarar que para que el código anterior funcione, faltará indicarle al Inyector de Angular quien es el provider del servicio Logger para saber como instanciarlo. De nuevo, entraremos en más detalle en el apartado de Dependency Injection, pero de momento, vamos a ver 2 opciones para registrar providers:

Durante el bootstraping

Pasamos un array con los providers al mecanismo de bootstrap.

//app/main.ts

bootstrap(AppComponent,[Logger]);

En los componentes

Usamos el metadato providers del componente para indicar los providers que va a necesitar el componente o cualquiera de sus subcomponentes.

@Component({
  //...some metadata params...
  providers:   [TodoService]
})
export class TodoListComponent {
  //TodoList component stuff
}

Haciendo un breve resumen, acabo de mostrarte como crear servicios en Angular 2 (como ves es mucho más simple que en su predecesor), y como inyectarlos en otros servicios y en componentes.

No obstante, el tema de la inyección es suficientemente potente como para merecer su propio apartado. ¡¡Mantente atento al próximo post!!

Recuerda que puedes ver el código completo en el repositorio de GitHub.

¡Saludos!

Published inAngular 2AngularJSES6ionicIonic FrameworkTypeScript

One Comment

Deja un comentario