DESARROLLO WEB CON ANGULAR FRAMEWORK

Contenido

• Módulo 1. La Evolución de Angular: Versiones Hito
• El Origen y la Ruptura
• Madurez Estructural y Herramientas (v4 - v8)
• La Era de Ivy (v9 - v13)
• El "Renacimiento" de Angular (v14 - v17)
• La Era Zoneless y Angular Moderno (v18 - v21)
• La última versión estable es Angular v22, lanzada oficialmente el 3 de junio de 2026.
• Módulo 2. Esencial Angular desde la v9 a la v20
• Para abarcar desde Angular 9 (donde nació el motor Ivy) hasta las innovaciones de Angular 22 (con Signal Forms y Zoneless por defecto), el secreto no es estudiar versión por versión, sino entender el cambio de paradigma.
• Era Ivy (v9–v13): El nuevo motor de renderizado
• ● El Motor Ivy (v9): Qué es, cómo optimizó el tamaño del bundle (paquete final) y por qué cambió las reglas del juego.
• ● Módulos Tradicionales (NgModules): Cómo estructurar una app clásica usando declaraciones, importaciones y proveedores (providers).
• ● Inyección de Dependencias Clásica: Uso de servicios a través del decorador @Injectable({ providedIn: 'root' }).
• Era Standalone (v14–v16): Adiós a NgModules
• ● Componentes Autónomos (Standalone Components - v14): Adiós obligatorio a los NgModules. Cómo crear componentes, directivas y pipes autónomos usando la propiedad standalone: true.
• ● Ruteo y Servicios Modernos (v15): Configuración de rutas limpias con provideRouter y manejo de la función inject() para reemplazar al constructor clásico.
• ● Nuevas Directivas de Rendimiento: Uso de NgOptimizedImage para la carga eficiente de imágenes.
• El Nuevo Paradigma Reactivo: Signals (v17 a v19)
• ● Introducción a los Signals (v17): Qué es la reactividad fina. Cómo usar signal(), computed() y effect().
• ● Nuevo Flujo de Control en Plantillas: Reemplazo de *ngIf, *ngFor y *ngSwitch por la nueva sintaxis nativa, mucho más rápida y limpia: @if, @for y @switch.
• ● Inputs y Consultas basadas en Signals (v17/v18): Declaración moderna de propiedades con input(), model() (binding bidireccional) y consultas al DOM con viewChild().
• Angular Ultra Eficiente y del Lado del Servidor y Reactividad nativa
• (v19 a v20)
• ● Habilitación de Zoneless (v19): Cómo configurar tu aplicación para que funcione sin zone.js, reduciendo drásticamente el peso y mejorando el rendimiento.
• ● Evolución del SSR (Server-Side Rendering): Hidratación profunda y estable para aplicaciones web que necesitan SEO impecable y carga instantánea.
• ● Manejo Asíncrono Moderno (v20): Uso de las APIs resource() e httpResource() para conectar Signals con llamadas HTTP sin depender obligatoriamente de RxJS.
• El Estado del Arte (v21 a v22)
• ● Formularios Basados en Signals (Signal Forms - v21/v22): Manejo de estados de formularios directamente con la reactividad nativa de Angular en lugar de los antiguos formularios reactivos basados en RxJS.
• ● Estrategia OnPush Obligatoria: Ajuste del detector de cambios por defecto a las mejores prácticas modernas.
• ● Herramientas de Testing Actuales: Migración del antiguo Karma hacia Vitest como el estándar veloz para pruebas unitarias.
• Módulo 3. Arquitecturas de Software en Angular
• Era NgModules + Ivy (v9–v13): Arquitectura clásica optimizada Arquitectura por capas horizontales (Layered)
• Era Standalone + Signals Preview (v14–v16): Desaparición de NgModules Arquitectura por slices verticales (Domain-Driven)
• Era Control Flow + Zoneless Preview (v17–v18): Nueva sintaxis y rendimiento Arquitectura declarativa con control flow
• Era Signal-First + Zoneless (v19–v22): Arquitectura moderna Arquitectura reactiva nativa
• Arquitectura recomendada hoy (Angular 21/22)
• Estructura de carpetas moderna
• Patrones esenciales a aplicar
• Flujo de datos unidireccional (aplicable a todas las eras)
• Resumen de migración recomendada
• Comparativa de Paradigmas Arquitectónicos