Creación y Uso de Servicios en Angular para Compartir Datos y Lógica
Servicios y HTTP en Angular (II)
En una aplicación Angular, la necesidad de compartir datos y lógica entre componentes es común, y aquí es donde los servicios entran en juego como vimos en la clase anterior. En este artículo, exploraremos cómo crear y utilizar un servicio en el contexto de un carrito de compras en un ecommerce.
Pero primero, vamos a recordar por qué utilizar un servicio:
En este caso, el carrito de compras es un componente clave que almacena los productos seleccionados por el usuario. En lugar de pasar los datos del carrito entre componentes de manera directa (mediante entradas y salidas como explicamos en su clase correspondiente), es más eficiente utilizar un servicio para centralizar esta lógica. Esto ofrece varias ventajas:
- Centralización de la lógica: Un servicio de carrito de compras puede manejar operaciones como agregar, eliminar o actualizar productos. Esto evita repetir la misma lógica en varios componentes.
- Mantenimiento sencillo: Si necesitas hacer cambios en la lógica del carrito, solo necesitas modificar el servicio, en lugar de buscar y actualizar múltiples componentes.
- Compartición de datos: El servicio asegura que todos los componentes que necesitan acceder al carrito trabajen con la misma instancia de datos. Esto previene problemas de inconsistencia.
Una vez aclarado esto, vamos manos a la obra. Como siempre comenzamos creando los archivos necesarios con CLI:
ng g s cart
Ahora debemos implementar la lógica de negocio de nuestra aplicación, en nuestro caso serían las opciones de agregar o eliminar productos, así como visualizar los productos añadidos o limpiar por completo el carrito. Una implementación sencilla sería la siguiente:
Ahora vamos a suponer que tenemos un componente donde se visualizan un listado de productos y por cada producto se visualiza un botón que lo añade directamente al carrito del cliente:
Protip: Recuerda que Angular nos permite añadir plantillas “inline”, es decir, sin la necesidad de crear un archivo HTML. Para ello fíjate en la línea 6, en lugar de utilizar templateUrl y pasarle la ruta relativa del archivo html utilizamos la propiedad template el cual contiene un string con nuestros elementos HTML.
Ahora imagina que tenemos otro componente que visualiza el detalle de un producto con toda su información y en este componente también debe existir el botón de añadir al carrito, para ello nos bastaría con inyectar CartService e invocar el método addToCart, de la misma manera que hicimos en el listado de productos ¿Comienzas a ver el grado de reutilización que nos brindan los servicios?
Recordemos que este método actualizará el listado de productos del CartService independientemente del componente donde es invocado debido a que solamente existe una instancia de este servicio a lo largo de la aplicación (para un mismo cliente). A este patrón se le conoce como “Singleton”
Ahora para visualizar los elementos del carrito, en su correspondiente componente, simplemente debemos invocar al getItems:
En resumen, al crear y utilizar un servicio para compartir datos y lógica entre componentes en un ejemplo de carrito de compras, obtienes un código más modular, mantenible y eficiente. El servicio centraliza las operaciones del carrito y garantiza que todos los componentes accedan a los mismos datos. Esta práctica ayuda a crear aplicaciones más organizadas y escalables.