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 TodoList
Ejercicio
Con el ejemplo de la 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.