Descubriendo los Servicios en Angular: Pilares fundamentales para el desarrollo en Angular.

Los Servicios en Angular son elementos cruciales que potencian la modularidad y reutilización de código en el desarrollo de aplicaciones. Se trata de objetos que siguen el patrón de diseño singleton, es decir, se crean una única vez, y son compartidos en toda la aplicación.

En este post exploraremos qué son los servicios, cuál es su propósito y cómo podemos aprovecharlos de una manera eficaz.

¿Qué son los Servicios en Angular?

Dentro del framework Angular, un servicio es una clase singular con un propósito específico, diseñada para llevar a cabo taras reutilizables en toda la aplicación. Desde la manipulación de datos hasta la gestión de la lógica de negocio, los servicios sirven como la columna vertebral para compartir funcionalidades entre componentes, garantizando de esta forma un código limpio y escalable.

Propósito fundamental de los Servicios.

1. Centralización de la Lógica de Negocio. Los servicios nos permiten encapsular y centralizar la lógica de negocio en un lugar dedicado, evitando así la duplicación de código y simplificando la gestión de funcionalidades clave.
2. Comunicación entre Componentes. Facilitan la comunicación entre componentes distintos actuando como intermediarios. De este modo, los componentes pueden centrarse en la presentación, mientras los servicios se encargan de la lógica correspondiente.
3. Gestión de Estados y Datos. Los servicios son muy útiles para la gestión de estados compartidos y la manipulación de datos, lo que permite conseguir una gestión más eficiente y coherente del flujo de información en la aplicación.

Implementación práctica de Servicios.

1. Creación de un Servicio. Para crear un servicio en Angular utilizamos el comando ‘ng generate service’,  seguido del nombre que daremos al servicio en cuestión. Este comando genera automáticamente una clase de servicio básica que podemos ir personalizando según los requisitos de la aplicación.

2. Inyección de Dependencias. Angular utiliza un patrón de inyección de dependencias para proporcionar instancias de servicios donde se necesiten. Esto se logra mediante la inyección del servicio en el constructor de un componente de la siguiente manera:

3. Utilización del servicio en el componente. Una vez que hemos inyectado el servicio en el componente tendremos acceso a los métodos y propiedades declarados en el servicio. Para poder acceder a ellos deberemos llamar a la variable declarada en el constructor del componente y, mediante la notación de puntos, llamar al método o propiedad del servicio que necesitemos utilizar.

4. Declaración del servicio en el módulo. Por último, para que podamos utilizar el servicio, éste debe ser incluido en los providers del módulo (ya sea el módulo general de la aplicación o en el del módulo del componente si lo hay).

Ejemplo práctico: Lista de Tareas.

Una vez conocemos qué son y cómo se implementan los servicios en Angular, vamos a desarrollar un ejemplo práctico en el que podamos observar la gran importancia de estos dentro de un proyecto. Para ello, vamos a utilizar un simple To Do List para comprobar la eficacia y el manejo de los servicios.

Paso 1: Creación del Servicio.

Primero, generamos nuestro servicio utilizando Angular CLI. Ejecutamos el siguiente comando en la terminal:

Esto nos proporciona un archivo tasks.service.ts con un esqueleto básico para empezar, y en el que vamos a desarrollar la lógica necesaria para obtener, añadir y eliminar tareas, tal y como se puede observar en la siguiente imagen:

Paso 2: Consumo del Servicio en el Componente.

Ahora, creamos un componente llamado TasksListComponent que utilizará nuestro servicio. Este componente mostrará la lista de tareas, permitirá agregar nuevas tareas y eliminar tareas existentes.

Conclusión

Con este ejemplo sencillo, podemos comprobar cómo los servicios en Angular nos permiten organizar y compartir lógica de manera eficiente. Al utilizar un servicio para la gestión de tareas, mantenemos nuestro código limpio y evitamos redundancias.

En conclusión, los servicios en Angular son esenciales para construir aplicaciones web robustas y escalables. Nos facilitan la organización del código, promueven la reutilización y simplifican la comunicación entre componentes. En definitiva, el uso de servicios en la construcción de aplicaciones web con el Framework de Angular, se trata de una herramienta fundamental y que deberemos dominar para lograr aplicaciones con un gran rendimiento y una gran mantenibilidad.

Autor: Pablo Torrecilla Rodríguez

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS.

Centro: Tajamar Tech

Año Académico: 2023 – 2024