Routing en Angular Moderno | 10

Sobre esta lección

En este video, se aborda uno de los aspectos más fundamentales en el desarrollo de aplicaciones de una sola página (SPA): el enrutamiento en Angular. Aprende a configurar el Router para navegar entre componentes de forma dinámica, implementar Lazy Loading para cargar componentes bajo demanda, y organizar rutas anidadas con parámetros personalizados. Este tutorial explora cómo diseñar rutas claras y eficientes, asegurando una experiencia de usuario fluida. Además, se incluyen ejemplos prácticos para integrar el enrutamiento en un proyecto real, manejando navegaciones y estructuras avanzadas. ✨ Lo que aprenderás: 🛠️ Configuración del Router: Cómo inicializar y estructurar el enrutamiento en Angular. 🚀 Lazy Loading: Uso de loadComponent para cargar componentes solo cuando se visiten. 🔄 Rutas dinámicas y parámetros: Definición de rutas con variables para navegar a componentes específicos. 🧩 Children y rutas anidadas: Organización de rutas dentro de rutas principales para una estructura modular. 🎯 RouterLink y RouterLinkActive: Creación de enlaces y gestión de estados activos con estilos personalizados. 💡 Buenas prácticas en enrutamiento: Cómo evitar errores comunes y optimizar la configuración del Router. 🔗 Índice de contenido con timestamps: 00:00 - Introducción al enrutamiento en Angular 00:32 - Demo de routing usando Angular. 00:32 - Navegación básica con menú 01:52- Creación de rutas de autenticación y páginas principales usando AngularCLI 03:05 - Estructura de directorios para enrutamiento 03:52 - Refactoring de un componente página a un componente a reutilizar en páginas 06:11 - Uso de alias en input de Angular para cambiar el nombre del evento exportado. 06:55 - Configuración inicial del Router y Lazy Loading de componentes. 10:40 - Configuración de rutas hijas usando children. 13:06 - Uso de parámetros en rutas dinámicas 14:10 - Configuración de rutas para autenticación 15:40 - Configuración de rutas por defecto y de error 404 usando redirectTo. 16:30 - Creación de un menú de navegación usando RouterLink 19:10 - Creación de menús interactivos usando RouterLinkActive 21:00 - Creación de la página home usando Single File Component (SFC) e injección de dependencias 22:37 - Refactoring del AppComponent a un Single File Component (SFC). 24:36 - Creación de la página de creación de héroes (NewHero) usando un componente reutilizable de formularios. 28:34 - Inyección del Router y navegación entre componentes usando .navigate 31:20 - Creación de botones de navegación para navegar entre componentes de HeroItem usando RouterLink. 34:40 - Página de actualización de héroes usando Single File Component y un componente reutilizable de formularios. 39:04 - Resumen y qué veremos en el siguiente vídeo. ------------------- RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------