Curso de Desarrollo Front-End con Angular

Clase 1 • Módulos 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.

Clase 2 • Fundamentos de TypeScript para Angular

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

Clase 3 • Introducción al framework Angular

Abarca 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.

Clase 4 • Configuración del entorno de desarrollo

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

Clase 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.

Clase 2 • Enlace de propiedad y de evento

Enseña el flujo de datos unidireccional mediante property binding y el manejo de eventos de usuario mediante event binding. Conecta la lógica del componente con elementos del DOM e interacciones del usuario.

Clase 3 • Sintaxis de plantillas y expresiones

Abarca el lenguaje de expresiones de plantilla 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 componentes.

Clase 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.

Clase 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 binding de plantilla.

Clase 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 primario de flujo de datos descendente en Angular.

Clase 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.

Clase 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 directiva introducido en el Capítulo 2.

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

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

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

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

Clase 3 • Manejo de errores e interceptores HTTP

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

Clase 4 • Inyección de dependencias en profundidad

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

Clase 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.

Clase 2 • Carga diferida y resolvers de ruta

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

Clase 3 • Rutas anidadas y outlets con nombre

Estructura rutas hijas bajo rutas padre y utiliza outlets con nombre para vistas auxiliares. Satisface requisitos de diseño complejos en aplicaciones grandes.

Clase 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 funcionalidades de navegación.

Clase 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.

Clase 2 • Validadores y validación personalizada

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

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

Maneja el envío, reinicio y estado dirty/touched del formulario para ofrecer una UX pulida. Conecta los datos del formulario a las llamadas de servicio presentadas en el Capítulo 4.

Clase 4 • Formularios basados en plantilla

Utiliza ngForm, ngModel y validadores incorporados para construir formularios de manera declarativa en la plantilla. Introduce conceptos de formularios con mínima sobrecarga de TypeScript.

Clase 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.

Clase 2 • Introducción a NgRx Store

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

Clase 3 • Estado basado en servicios con BehaviorSubject

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

Clase 4 • Efectos 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.

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

Despliega builds de Angular en hosting estático e integra pipelines automatizados para entrega continua. Cierra el ciclo de vida de desarrollo desde el código hasta producción.

Clase 2 • Prueba unitaria de componentes y servicios

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

Clase 3 • Optimización de bundle y configuración de build

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

Clase 4 • Prueba de extremo a extremo con Cypress

Automatiza 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.