Angular — Intermedio

Este curso está dirigido a desarrolladores que ya dominan los fundamentos de Angular y desean consolidar patrones de diseño y técnicas avanzadas aplicables a proyectos de complejidad media. A lo largo de ocho horas de trabajo práctico, los participantes explorarán cómo estructurar aplicaciones escalables mediante una arquitectura de módulos bien definida, cómo conectar la aplicación a APIs REST gestionando flujos reactivos con RxJS, y cómo configurar un sistema de navegación robusto con lazy loading y guards de autenticación. Además, profundizarán en la construcción de formularios reactivos complejos, en la optimización del rendimiento mediante estrategias de detección de cambios, en la creación de componentes reutilizables y en el diagnóstico de fugas de memoria. Al finalizar, cada participante habrá refactorizado o construido un módulo Angular de complejidad media que integre todos estos patrones de forma coherente y justificada.

1. Diseñar la arquitectura de módulos y componentes de una aplicación Angular de complejidad media, separando responsabilidades entre el módulo raíz, los módulos funcionales y el módulo compartido.
2. Integrar una API REST externa mediante HttpClient, aplicando operadores RxJS para transformar respuestas y gestionar errores de forma declarativa.
3. Diseñar un sistema de routing con rutas anidadas, carga diferida de módulos funcionales y guards que redirijan al usuario según su estado de sesión.
4. Diseñar formularios reactivos con agrupaciones y arrays de controles, incorporando validaciones síncronas y asíncronas personalizadas con mensajes de error contextuales.
5. Comparar las estrategias de detección de cambios disponibles en Angular y aplicar la estrategia OnPush en escenarios con datos inmutables, argumentando el impacto en el rendimiento.
6. Depurar fugas de memoria originadas por suscripciones no cerradas, usando Angular DevTools para identificar el origen y aplicando la solución adecuada.
7. Adaptar componentes existentes para hacerlos reutilizables mediante comunicación por propiedades y eventos, proyección de contenido y pipes personalizados.
8. Justificar la elección del tipo de Subject apropiado para compartir estado entre componentes no relacionados e implementar la solución en un servicio de estado compartido.

Arquitectura de módulos y componentes. El curso abre con el diseño de la estructura modular de una aplicación Angular de complejidad media. Se analiza la separación de responsabilidades entre el módulo raíz, los módulos funcionales y el módulo compartido, y se establecen criterios para decidir qué artefactos pertenecen a cada capa.

Routing avanzado y lazy loading. A continuación se aborda la configuración de un sistema de navegación con rutas anidadas y carga diferida de módulos funcionales. Se implementa al menos un guard de autenticación que evalúa el estado de sesión del usuario y realiza la redirección correspondiente, integrando este comportamiento con la arquitectura modular definida previamente.

Integración con APIs REST y RxJS. El bloque central trata la conexión con servicios externos mediante HttpClient. Se trabaja con los operadores switchMap, map y catchError para componer cadenas de transformación de datos y gestionar errores de red de forma declarativa, consolidando el modelo reactivo que Angular promueve.

Formularios reactivos avanzados. Se construyen formularios con FormGroup y FormArray, incorporando validaciones síncronas y asíncronas desarrolladas a medida. Se presta especial atención a la presentación de mensajes de error contextuales en la plantilla de forma limpia y mantenible.

Rendimiento y detección de cambios. Se comparan las estrategias Default y OnPush, se aplica ChangeDetectionStrategy.OnPush en un componente de lista con datos inmutables y se analiza el impacto observable en el ciclo de renderizado, sentando las bases para optimizar aplicaciones de mayor escala.

Componentes reutilizables y depuración. El bloque final cubre dos ámbitos complementarios: por un lado, la adaptación de componentes existentes para convertirlos en piezas reutilizables mediante @Input, @Output, ng-content y pipes personalizados sin afectar a los consumidores; por otro, la identificación y corrección de fugas de memoria causadas por suscripciones no cerradas, utilizando Angular DevTools y aplicando las soluciones takeUntil o async pipe según el contexto.

Estado compartido con RxJS Subjects. Para cerrar el curso se comparan Subject, BehaviorSubject y ReplaySubject, se justifica la elección de cada uno según el caso de uso y se implementa el tipo seleccionado dentro de un servicio de estado compartido que coordina componentes no relacionados jerárquicamente.

• Node.js 18 LTS o superior con npm 9+.
• Angular CLI 17 o superior instalado globalmente (npm install -g @angular/cli).
• Editor de código Visual Studio Code con la extensión oficial Angular Language Service.
• Angular DevTools instalado como extensión en el navegador Google Chrome o Microsoft Edge.
• Acceso a una API REST pública de prueba (por ejemplo, JSONPlaceholder) o entorno de mock local con json-server.
• Git 2.x para clonar el repositorio de ejercicios del curso.

• Estructura de un proyecto Angular: módulo raíz, componentes, servicios y directivas básicas (nivel equivalente a ANG01).
• Conceptos fundamentales de TypeScript: tipos, interfaces, clases, decoradores y módulos ES.
• Principios básicos de programación reactiva con RxJS: Observable, Subject y los operadores pipe, map y filter.
• Uso del CLI de Angular para generar artefactos y ejecutar el servidor de desarrollo.
• Conocimiento básico de HTTP y JSON para consumo de APIs REST.