Desarrollo Frontend · FRO-130

Angular: fundamentos y arquitectura

Módulos, inyección de dependencias y RxJS en el marco que eligen las organizaciones grandes.

Bajo demanda Avanzado 7 módulos · 34 clases

Formato asíncrono Desarrollo Angular, TypeScript

DESARROLLO

Lo que aprenderás

Estructurar una aplicación en módulos y componentes autónomos con carga diferida por ruta
Registrar y consumir servicios mediante el inyector jerárquico de dependencias de Angular
Componer flujos asíncronos con RxJS usando switchMap, combineLatest y takeUntilDestroyed
Construir formularios reactivos con FormBuilder, validadores propios y validación asíncrona contra el servidor
Comunicar con el backend mediante HttpClient, interceptores y tipado de respuestas
Controlar la detección de cambios con OnPush y signals para evitar renderizados innecesarios
Probar componentes y servicios aislando dependencias con TestBed, HttpTestingController y Jasmine

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Presentación y entorno 4 clases

Por qué Angular en aplicaciones de larga vida
Angular CLI: generar el proyecto y recorrer su estructura
Componentes autónomos y NgModules: el estado actual
Ciclo de desarrollo, compilación y análisis estático

Módulo 2 · Componentes y plantillas 5 clases

Plantillas, interpolación y enlace de propiedades
Entradas y salidas entre componentes
Directivas estructurales y la sintaxis de control de flujo
Ciclo de vida de un componente
Encapsulación de estilos y comunicación con el DOM

Módulo 3 · Inyección de dependencias 5 clases

Servicios y el decorador Injectable
Inyectores jerárquicos y ámbito de un proveedor
Tokens de inyección y valores de configuración
La función inject y su uso fuera del constructor
Ejercicio: servicio de configuración por entorno

Módulo 4 · RxJS aplicado 5 clases

Observables, suscripción y el problema de las fugas
Operadores de transformación y de filtrado
switchMap frente a mergeMap y concatMap
combineLatest, forkJoin y composición de fuentes
Buscador con debounce y cancelación de peticiones

Módulo 5 · Datos y formularios 5 clases

HttpClient y tipado de las respuestas
Interceptores para autenticación y errores
Formularios reactivos y FormBuilder
Validadores propios y validación asíncrona
Formularios anidados y arrays de controles

Módulo 6 · Rutas y rendimiento 5 clases

Router, rutas hijas y parámetros
Guardas de acceso y resolvers de datos
Carga diferida por ruta y división del paquete
Detección de cambios OnPush y signals
Analizar el paquete y el tiempo de arranque

Módulo 7 · Pruebas y proyecto de cierre 5 clases

TestBed y pruebas de componentes
Pruebas de servicios con HttpTestingController
Aplicación de gestión completa con varios módulos
Autenticación, listados y edición contra el backend
Revisión de arquitectura y convenios de equipo

Requisitos

TypeScript con soltura: interfaces, genéricos, decoradores y tipos de unión
Experiencia previa con algún marco de frontend basado en componentes
Node.js y Angular CLI instalados en local

Descripción

En organizaciones con varios equipos tocando el mismo frontend, la libertad de elegir estructura en cada carpeta acaba costando cara. Angular impone convenciones, inyección de dependencias y una separación clara entre componentes, servicios y rutas, y ese es justamente el motivo por el que aparece en banca, administración pública y grandes portales corporativos.

El curso construye una aplicación de gestión con varios módulos, autenticación por interceptor, formularios reactivos complejos y listados que se sincronizan con el servidor. RxJS se introduce resolviendo problemas concretos: cancelar una petición obsoleta al teclear en un buscador, combinar dos fuentes de datos, evitar fugas de suscripciones. Todo se acompaña de sus pruebas unitarias.

Al terminar se puede trabajar en una base de código Angular existente entendiendo sus convenciones, y proponer estructura en un proyecto nuevo. Encaja con equipos que mantienen aplicaciones de larga vida y abre paso a temas de especialización como NgRx, renderizado en servidor y micro frontends.

¿Para quién es este curso?

Desarrolladores frontend que se incorporan a un equipo con una aplicación Angular ya en producción
Perfiles técnicos de organizaciones grandes que necesitan convenciones estables y de larga vida
Personas que vienen de React o Vue y deben mantener un proyecto corporativo en Angular