Resolve e input Signal en Angular | 11

Sobre esta lección

En este video del curso Angular Moderno, se profundiza en la gestión avanzada de rutas mediante el uso de resolvers y signals. Aprende cómo precargar datos antes de cargar una vista con Resolver, asegurando una experiencia de usuario optimizada. También exploraremos cómo usar Input Signals para actualizar componentes en tiempo real, y cómo integrar guardas para controlar el acceso a rutas protegidas. El tutorial cubre estrategias prácticas para manejar datos dinámicos y configurar servicios reutilizables. ✨ Lo que aprenderás: 🛠️ Uso de Resolvers en rutas: Precarga de datos antes de renderizar vistas específicas. 🚀 Signals en Angular: Implementación de señales para actualizar formularios dinámicos. 🔄 Guardas para rutas: Controlar el acceso a rutas específicas. 🧩 Componentes reactivos: Configuración de servicios reutilizables y optimización del código. 🎯 Validaciones y manejo de errores: Gestión avanzada de parámetros en rutas. 🔗 Índice de contenido con timestamps: 00:00 - Introducción y objetivos 00:30 - ¿Que son las guardas y los resolvers de Angular? 01:34 - ¿Por qué son importantes las guardas y los resolvers en Angular? 01:50 - Configuración básica de un resolver 02:52 - Creación de un resolver para recuperar un objeto desde el servicio. 05:45 - Implementación de métodos auxiliares en HeroService 06:20 - Creación del NullObject Pattern 08:05 - Creación del DefaultObject de héroes 11:50 - Refactorización del código del resolver 13:10 - Uso del resolver en un componente 15:12 - Configuración avanzada del Input Signal para recibir el valor del resolver 17:10 - Reutilización de formularios dinámicos 19:00 - Creación de una Signal de FormGroup para tener sincronizado el formulario 23:00 - Actualización de la Página HeroUpdate 24:45 - Actualización de la Página HeroNew 26:26 - Creación de una Signal computed para el texto que corresponda en la página HeroUpdate/HeroNew 28:22 - Uso de input signal para resolver los datos 28:45 - Configuración de withComponentInputBinding 29:20 - Creación de la página HeroDetail usando input del router 30:50 - Funciones transformadoras de input. 32:53 - Creación del componente HeroItemNotFound cuando no exista un id válido resuelto. 34:40 - Errores personalizados: Uso del flujo de control para mostrar un Héroe o el HeroItemNotFound 36:50 - Errores personalizados: Uso del flujo de control para mostrar si un Héroe es válido en la actualización de un Héroe 39:37 - Validación avanzada con URL Matchers 40:50 - Conclusiones y próximas lecciones ------------------- RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------