Los servicios son elementos no visuales dentro de Angular, se usan para compartir funcionalidad, comunicar componentes y ordenar el código.

Servicios e Inyección de Dependencias

En Angular podemos especificar servicios que son básicamente clases que la mayoría de las veces actuan como singletons.

Generalmente contienen cierta funcionalidad o estado compartido entre diferentes componentes.

Angular tiene un sistema de inyección de dependencias totalmente integrado en el framework. Este sistema implementa la Inversion de Control en la instanciación de nuestros servicios para desacoplarlos y entre otras cosas facilitar el testing.

Servicios introducción

Para crear un servicio podemos usar el angular/cli para generarlo y con uns simple Inyección empezar a utilizarlo.

ng generate service Todo

por ejemplo va a generar la clase TodoService con un esqueleto de unit test.

Modos de Inyección de servicios

Vamos a ver tres formas bascas de inyectar un servicio:

  • En el modulo root
  • En un modulo particular
  • En un componente

Cada una opera de forma ligeramente diferente en cuanto a las instancias generadas por el inyector. En el primer caso un singleton, en el segundo un singleton a nivel modulo, diferentes modulos tendrán diferentes instancias, y en el tercero el servicio acompaña el ciclo de vida del componente.

Servicios ¿para que?

Existen muchas razones para usar servicios entre otras:

  • Agrupar funcionalidad compartida
  • Comunicar componentes
  • Ordenar mejor el código

Veremos en detalle con un ejemplo como hacer cada una. Mientras hacemos un refactor de nuestra humilde :memo: TodoList

Ejercicio

Con el ejemplo de la :memo: TodoList Tomar el codigo del branch servicios bajarlo a su propio repo e implementar en otro servicio llamado LocalStorageService el guardado de la lista de forma persistente segun las apis del navegador

Mas info de Angular

Este post es parte de una serie de videos para la cátedra de Técnicas y Tecnologías Avanzadas de Desarrollo de Software (TTADS). Sobre Angular, en este caso el funcionamiento básico de los servicios e inyección de dependencias.

Aca se puede ver la presentacion que se uso para esas clases.

Aca el codigo de este ejemplo.

La documentación oficial de Angular la base para empezar a usar el framework.

Acá el canal de youtube de la materia.

Actualizado: