Curso de desarrollo front-end con Angular

Lección 1 • Módulos de Angular y arranque de la aplicación

Explica los NgModules, el AppModule raíz y cómo Angular arranca la aplicación. Proporciona el contexto estructural necesario antes de construir componentes.

Lección 2 • TypeScript esencial para Angular

Presenta los tipos, interfaces y decoradores de TypeScript necesarios para escribir código de Angular con confianza. Une el conocimiento de JavaScript con el ecosistema tipado de Angular.

Lección 3 • Introducción al framework de Angular

Cubre el rol de Angular en el desarrollo front-end moderno y su arquitectura inspirada en MVC. Establece la base conceptual para todos los temas posteriores del framework.

Lección 4 • Configuración del entorno de desarrollo

Instala y configura Node.js, npm y Angular CLI. Garantiza que cada estudiante tenga un espacio de trabajo local consistente y reproducible.

Lección 1 • Directivas estructurales integradas

Aplica *ngIf, *ngFor y *ngSwitch para controlar la estructura del DOM dinámicamente. Demuestra cómo las directivas extienden la expresividad de las plantillas.

Lección 2 • Enlace de propiedades y eventos

Enseña el flujo de datos unidireccional mediante enlace de propiedades y el manejo de eventos de usuario mediante enlace de eventos. Conecta la lógica del componente con los elementos del DOM y las interacciones del usuario.

Lección 3 • Sintaxis de plantillas y expresiones

Cubre el lenguaje de expresiones de plantilla de Angular, la navegación segura y las variables de referencia de plantilla. Permite el renderizado de contenido dinámico dentro de las vistas de los componentes.

Lección 4 • Hooks del ciclo de vida del componente

Explora la secuencia completa de hooks del ciclo de vida desde ngOnInit hasta ngOnDestroy. Enseña cuándo y por qué usar cada hook para inicialización y limpieza.

Lección 1 • Consultas ViewChild y ContentChild

Accede a instancias de componentes hijos y contenido proyectado programáticamente mediante consultas. Permite una coordinación avanzada de componentes más allá del enlace en plantillas.

Lección 2 • Comunicación de padre a hijo con @Input

Usa @Input para pasar datos hacia abajo en el árbol de componentes y valida el input con setters. Establece el patrón principal de flujo de datos descendente en Angular.

Lección 3 • Construcción de directivas estructurales personalizadas

Implementa directivas estructurales usando TemplateRef y ViewContainerRef para manipular el DOM. Amplía la capacidad de los estudiantes para crear lógica de diseño reutilizable.

Lección 4 • Construcción de directivas de atributo personalizadas

Crea directivas que modifican la apariencia o comportamiento del elemento anfitrión sin cambiar la estructura del DOM. Refuerza el patrón de directivas introducido en el Capítulo 2.

Lección 1 • Creación y provisión de servicios de Angular

Genera servicios con la CLI y los registra en alcance de módulo, componente o raíz. Establece la capa de servicios como el hogar para la lógica compartida.

Lección 2 • Cliente HTTP e integración con API REST

Configura HttpClientModule y realiza peticiones GET, POST, PUT y DELETE. Conecta la capa de servicios con fuentes de datos reales del back-end.

Lección 3 • Manejo de errores e interceptores HTTP

Implementa el manejo global de errores con catchError y la transformación de peticiones/respuestas con interceptores. Produce patrones de comunicación HTTP listos para producción.

Lección 4 • Inyección de dependencias a fondo

Explora la jerarquía de DI, los tokens de inyección y los tipos de provider. Permite un control detallado sobre cómo se resuelven las dependencias en toda la aplicación.

Lección 1 • Guards de ruta y control de acceso

Implementa guards CanActivate, CanDeactivate y CanLoad para proteger rutas. Integra autenticación y autorización en la capa de navegación.

Lección 2 • Carga perezosa y resolvers de ruta

Divide la aplicación en módulos de funcionalidad cargados bajo demanda y precarga datos con resolvers. Mejora el rendimiento de carga inicial y la experiencia del usuario.

Lección 3 • Rutas anidadas y salidas con nombre

Estructura rutas hijas bajo rutas padre y usa salidas con nombre para vistas auxiliares. Soporta requisitos de diseño complejos en aplicaciones grandes.

Lección 4 • Configuración del router y navegación básica

Configura RouterModule con definiciones de ruta y agrega router-outlet y routerLink. Establece la base para todas las funciones de navegación.

Lección 1 • Formularios dinámicos con FormArray

Usa FormArray para agregar y eliminar controles de formulario en tiempo de ejecución para datos de longitud variable. Maneja escenarios del mundo real como líneas de pedido repetidas.

Lección 2 • Validadores y validación personalizada

Aplica validadores síncronos y asíncronos y crea funciones de validación personalizadas reutilizables. Garantiza la integridad de datos antes del envío.

Lección 3 • Envío de formularios y gestión del estado

Maneja el envío, restablecimiento y los estados dirty/touched del formulario para ofrecer una UX pulida. Conecta los datos del formulario a las llamadas a servicios introducidas en el Capítulo 4.

Lección 4 • Formularios basados en plantilla

Usa ngForm, ngModel y validadores integrados para construir formularios declarativamente en la plantilla. Introduce conceptos de formularios con mínima sobrecarga de TypeScript.

Lección 1 • NgRx Entity y DevTools

Simplifica la gestión de colecciones con NgRx Entity e inspecciona el estado con Redux DevTools. Acelera el desarrollo y la depuración de funcionalidades con uso intensivo del store.

Lección 2 • Introducción al Store de NgRx

Instala NgRx y define acciones, reducers y el store para una porción de funcionalidad. Establece el patrón Redux dentro del ecosistema Angular.

Lección 3 • Estado basado en servicios con BehaviorSubject

Almacena y comparte estado entre componentes usando BehaviorSubject en un servicio. Proporciona una solución de estado ligera antes de introducir NgRx.

Lección 4 • Efectos de NgRx para efectos secundarios

Maneja operaciones asíncronas como llamadas HTTP fuera de los reducers usando NgRx Effects. Mantiene los reducers puros y centraliza la lógica de efectos secundarios.

Lección 1 • Estrategias de despliegue e integración de CI/CD

Despliega compilaciones de Angular en hosting estático e integra tuberías automatizadas para entrega continua. Cierra el ciclo de vida de desarrollo desde el código hasta producción.

Lección 2 • Pruebas unitarias de componentes y servicios

Escribe pruebas unitarias con Jasmine y TestBed para componentes, servicios y pipes. Valida unidades individuales de forma aislada antes de la integración.

Lección 3 • Optimización de bundle y configuración de compilación

Configura compilaciones de producción, tree shaking y carga diferencial para un tamaño de bundle óptimo. Prepara la aplicación para las restricciones de despliegue del mundo real.

Lección 4 • Pruebas de extremo a extremo con Cypress

Automatiza las pruebas de flujo de usuario con Cypress para validar el comportamiento completo de la aplicación. Complementa las pruebas unitarias con escenarios realistas basados en el navegador.