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

Introduce 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 línea 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 disponga de 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 de forma dinámica. Demuestra cómo las directivas amplían 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 expresión de plantillas de Angular, la navegación segura y las variables de referencia de plantilla. Permite la renderización de contenido dinámico dentro de las vistas de 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 la inicialización y limpieza.

Lección 1 • Consultas ViewChild y ContentChild

Accede a instancias de componentes hijos y contenido proyectado mediante programación a través de 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

Utiliza @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 utilizando 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 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 en ámbito 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 de API REST

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

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 • Inmersión profunda en la inyección de dependencias

Explora la jerarquía de inyección de dependencias, tokens de inyección y 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 los 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 outlets con nombre

Estructura rutas hijas bajo rutas padre y utiliza outlets 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 el RouterModule con definiciones de ruta y agrega router-outlet y routerLink. Establece la base para todas las funcionalidades de navegación.

Lección 1 • Formularios dinámicos con FormArray

Utiliza 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, reinicio y los estados dirty/touched del formulario para ofrecer una experiencia de usuario pulida. Conecta los datos del formulario con las llamadas a servicios introducidas en el Capítulo 4.

Lección 4 • Formularios de plantilla

Utiliza 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 un slice 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 utilizando 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 a 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 las compilaciones de producción, el tree shaking y la carga diferencial para un tamaño de bundle óptimo. Prepara la aplicación para las restricciones 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.