Interceptores en Angular 19+: Token, Loader y Mejora de UX con Debounce | 20

Sobre esta lección

Los interceptores HTTP en Angular son una herramienta esencial para modificar y controlar todas las peticiones HTTP de forma global. En este video aprenderás a implementar dos interceptores funcionales: 1️⃣ Interceptor de Token: Añade automáticamente el token de autenticación a cada petición. 2️⃣ Interceptor de Loader: Muestra un indicador de carga (spinner) mientras se realizan las peticiones HTTP, optimizando la experiencia del usuario. ➕ Bonus: Mejora la UX con Debounce para evitar que el loader parpadee en peticiones rápidas. Si buscas dominar interceptores HTTP en Angular 19+ con Stand Alone Components y Signals, este video es para ti. ✨ Lo que aprenderás en este video: 🔐 Añadir el token de autenticación a todas las peticiones con un interceptor. ⚡ Mostrar un Loader global con Signals mientras se cargan datos. ⏳ Optimizar el spinner con DebounceTime para mejorar la experiencia del usuario. 🧠 Configurar interceptores funcionales en el app.config.ts. 🛠️ Integrar RxJS y Signals en los interceptores. ⏲️ Índice de contenido con timestamps: 00:00 - ¿Qué son los interceptores HTTP en Angular? Casos de uso 01:55 - Creación del Interceptor de Token para añadir Bearer Token 04:35 - Configuración del interceptor en app.config.ts 05:00 - Verificación de que el Token se añade correctamente 05:41 - Creación del Servicio de Loader con Signals 08:03 - Creación del Interceptor de Loader con Signals y sin Debounce 10:30 - Creación del Componente DottechLoaderComponent con TailwindCSS 13:50 - Carga del Componente DotTechLoader en la aplicación 15:15 - Creación del Interceptor de Loader con Signals y con Debounce 18:22 - Conclusiones ------------------ RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------