Gestionando el ESTADO de una aplicación en Angular con BehaviorSubject y RxJS | 14

Lección 13 de 3241%

Sigue así. Cada lección te acerca más a tu certificado.

Sobre esta lección

En este video aprenderás a manejar el estado de la aplicación en Angular utilizando BehaviorSubject de RxJS, una técnica esencial para optimizar el rendimiento y mejorar la reactividad en tus componentes. Exploraremos cómo evitar el acoplamiento excesivo al backend, almacenar valores en memoria y mejorar la eficiencia de las peticiones HTTP. Verás la diferencia entre Subject y BehaviorSubject, cómo integrarlo en un servicio de Angular y cómo suscribirse correctamente a los datos. Si has tenido problemas con componentes que no reflejan cambios, datos que se pierden tras la navegación o peticiones que no se actualizan correctamente, este video es para ti. ✨ Lo que aprenderás en este video: ✅ 🚀 Introducción a BehaviorSubject: Qué es y cómo funciona en Angular. 🔄 📡 Diferencias clave entre Subject y BehaviorSubject. ⚠️ ❌ Cómo evitar el acoplamiento al backend usando un Store en memoria. 🛠️ 🔄 Cómo almacenar el estado en un servicio Angular con RxJS. 🔍 📊 Uso de next() para emitir cambios en la aplicación. 💡 🔁 Suscribirse correctamente a un BehaviorSubject y actualizar los datos en tiempo real. 📡 📬 Implementación en un CRUD: GET, POST, PUT y DELETE. 🔗 Índice de contenido con timestamps: 00:00 - Introducción: Problema con el estado en Angular 00:30 - Qué es un Store y por qué necesitamos BehaviorSubject 03:23 - Cómo usar BehaviorSubject para gestionar el estado 05:19- Diferencias entre Subject y BehaviorSubject en Angular 06:00 - Problema de NO gestionar el State de la Aplicación. 07:20 - Implementación de BehaviorSubject en un servicio Angular con buenas prácticas 09:50 - Carga de datos desde el backend (servidor) 12:20 - Subscripción al estado de la aplicación (BehaviourSubject) 15:30 - Comprobación en la aplicación que los datos se cargan correctamente 15:55 - Añadir datos en el estado de la aplicación 18:32 - Actualizar datos en el estado de la aplicación 21:00 - Eliminar datos en el estado de la aplicación 23:33 - Búsqueda de datos en el estado de la aplicación 24:20 - Uso del estado de la aplicación en los componentes 26:10 - Comprobación que la aplicación FUNCIONA correctamente tras agregar el etado de la aplicación ------------------- RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------

Sobre este curso

En este curso aprenderás a desarrollar una aplicación completa en Angular Moderno (19+) aprendiendo los fundamentos de Angular.

Lección 13 de 32Nivel: principianteDuración total: 12h 48m

Lo que aprenderás en este curso:

  • Comprender la arquitectura de módulos y componentes de Angular
  • Crear servicios, directivas y pipes personalizados
  • Implementar formularios reactivos y validaciones
  • Gestionar el enrutamiento y la navegación en Angular