Curso de 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 • Fundamentos de TypeScript para Angular

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

Lección 3 • Introducción al framework 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 coherente y reproducible.

Lección 1 • Directivas estructurales incorporadas

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 plantillas de Angular, la navegación segura y las variables de referencia de plantilla. Permite el renderizado dinámico de contenido 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 la entrada 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 crear lógica de diseño reutilizable.

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

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

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

Genera servicios con la CLI y los registra a nivel de módulo, componente o raíz. Establece la capa de servicios como el hogar de 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 proveedores. 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 de 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 enrutador y navegación básica

Configura RouterModule con definiciones de ruta y añade router-outlet y routerLink. Establece la base para todas las funcionalidades 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 validador personalizadas reutilizables. Asegura la integridad de los 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 con las llamadas a servicios presentadas en el Capítulo 4.

Lección 4 • Formularios dirigidos por plantilla

Usa ngForm, ngModel y validadores incorporados para construir formularios declarativamente en la plantilla. Introduce los conceptos de formularios con una sobrecarga mínima 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, reductores 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 reductores usando Efectos de NgRx. Mantiene los reductores puros y centraliza la lógica de efectos secundarios.

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

Despliega compilaciones de Angular en alojamiento estático e integra pipelines automatizados para la 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 paquetes y configuración de compilación

Configura compilaciones de producción, tree shaking y carga diferencial para un tamaño de paquete óptimo. Prepara la aplicación para las limitaciones de despliegue en el 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.