Curso de desarrollo con Angular

Lección 1 • Generación de Su Primer Proyecto Angular

Usa la CLI de Angular para generar un proyecto, explorar su estructura de archivos y ejecutar el servidor de desarrollo. Desarrolla familiaridad con la disposición del espacio de trabajo utilizada a lo largo del curso.

Lección 2 • Configuración del Entorno de Desarrollo

Instala Node.js, npm y la CLI de Angular para preparar un espacio de trabajo local. Habilita directamente la creación de proyectos que se cubre en la siguiente sección.

Lección 3 • Fundamentos de TypeScript para Angular

Introduce los tipos de TypeScript, interfaces, decoradores y módulos tal como se usan en Angular. Asegura que los estudiantes puedan leer y escribir código Angular con confianza a partir del capítulo dos.

Lección 1 • Anatomía de un Componente Angular

Desglosa el decorador del componente, la clase, la plantilla y los estilos en sus roles. Establece el modelo mental para cada elemento de UI construido en este curso.

Lección 2 • Directivas de Atributo y Pipes

Aplica directivas de atributo integradas como ngClass y ngStyle, y transforma datos con pipes integrados. Completa las capacidades de la plantilla antes de pasar a los servicios.

Lección 3 • Directivas Estructurales Integradas

Cubre ngIf, ngFor y ngSwitch para la renderización condicional y de listas en plantillas. Habilita la visualización dinámica de contenido esencial para UIs del mundo real.

Lección 4 • Sintaxis de Plantillas y Enlace de Datos

Enseña interpolación, enlace de propiedades, enlace de eventos y enlace bidireccional con ngModel. Conecta la lógica del componente al DOM para UIs interactivas.

Lección 1 • Inyección de Dependencias a Profundidad

Explora la jerarquía del inyector de Angular, los tokens de proveedor y el alcance de la inyección. Permite un control preciso sobre la instanciación de servicios y su compartición entre módulos.

Lección 2 • Creación y Uso de Servicios

Genera servicios con la CLI, encapsula la lógica de negocio y los inyecta en componentes. Demuestra el principio de responsabilidad única en la arquitectura de Angular.

Lección 3 • Comprendiendo los NgModules

Explica declarations, imports, exports y providers en los metadatos de NgModule. Establece el sistema de módulos que organiza cada aplicación Angular.

Lección 1 • Guardias de Ruta y Resolvers

Protege rutas con los guardias CanActivate y CanDeactivate, y precarga datos con Resolve. Asegura la navegación segura y los datos precargados antes del renderizado del componente.

Lección 2 • Rutas Hijas y Salidas Nombradas

Anida rutas hijas dentro de módulos de funcionalidad y usa salidas nombradas para vistas auxiliares. Soporta diseños complejos como paneles de control con paneles laterales.

Lección 3 • Carga Diferida de Módulos de Funcionalidad

Divide la aplicación en módulos de funcionalidad cargados de forma diferida para reducir el tamaño inicial del paquete. Mejora directamente las métricas de rendimiento cubiertas en los capítulos avanzados.

Lección 4 • Parámetros de Ruta y Cadenas de Consulta

Lee segmentos de ruta dinámicos y parámetros de consulta opcionales usando ActivatedRoute. Habilita vistas de detalle y listados filtrados impulsados por el estado de la URL.

Lección 1 • Async Pipe e Integración con Plantillas

Se suscribe a observables directamente en las plantillas usando el async pipe, eliminando la gestión manual de suscripciones. Reduce el código repetitivo y previene fugas de memoria en los componentes.

Lección 2 • Subjects y Multidifusión

Usa Subject, BehaviorSubject y ReplaySubject para multidifundir valores a múltiples suscriptores. Habilita patrones de estado compartido utilizados en la gestión de estado basada en servicios.

Lección 3 • Operadores Fundamentales de RxJS

Aplica map, filter, switchMap, mergeMap y catchError para transformar y combinar flujos. Capacita a los estudiantes para manejar requisitos de transformación de datos del mundo real.

Lección 1 • Simulación de HTTP en Desarrollo

Usa HttpClientTestingModule y una API web en memoria para simular respuestas del backend durante el desarrollo. Desacopla el progreso del frontend de la disponibilidad del backend.

Lección 2 • Estrategias de Manejo de Errores y Reintentos

Maneja errores HTTP con los operadores catchError, retry y retryWhen para llamadas a API resilientes. Asegura una degradación controlada y retroalimentación de error amigable para el usuario.

Lección 3 • Interceptores HTTP

Crea interceptores para adjuntar tokens de autenticación, registrar solicitudes y transformar respuestas globalmente. Centraliza las preocupaciones transversales HTTP sin modificar las llamadas de servicio individuales.

Lección 4 • Configuración de HttpClient y Solicitudes GET

Importa HttpClientModule, inyecta HttpClient y realiza solicitudes GET tipadas. Establece la línea base para toda la comunicación con el backend en la aplicación.

Lección 1 • Formularios Dinámicos con FormArray

Gestiona listas de controles de longitud variable usando FormArray para escenarios de formularios dinámicos. Soporta casos de uso como agregar múltiples direcciones o elementos de línea.

Lección 2 • Fundamentos de Formularios Reactivos

Construye formularios programáticamente usando FormControl, FormGroup y FormBuilder. Habilita una lógica de formulario escalable y comprobable, impulsada completamente desde la clase del componente.

Lección 3 • UX y Accesibilidad de Formularios

Aplica los estados touched, dirty y pristine para controlar la visibilidad del error y mejorar la UX del formulario. Asegura que los formularios cumplan con los estándares de accesibilidad con los atributos ARIA adecuados.

Lección 4 • Validadores Personalizados y Validación Asíncrona

Escribe validadores personalizados síncronos y asíncronos para verificaciones entre campos y del lado del servidor. Extiende el sistema de validación de Angular para cumplir con reglas de negocio complejas.

Lección 1 • Fundamentos de Gestión de Estado

Implementa estado basado en servicios con BehaviorSubject e introduce conceptos del store NgRx para un estado escalable. Prepara a los estudiantes para elegir la estrategia de estado correcta según la complejidad de la aplicación.

Lección 2 • Directivas y Pipes Personalizados

Construye directivas de atributo reutilizables con HostListener y HostBinding, y crea pipes personalizados puros e impuros. Extiende las capacidades de la plantilla de Angular para necesidades de dominio específico.

Lección 3 • Proyección de Contenido y Componentes Dinámicos

Usa ng-content para proyección de una y múltiples ranuras y crea componentes dinámicamente en tiempo de ejecución. Habilita componentes de librería de UI altamente flexibles y reutilizables.

Lección 4 • Estrategias de Detección de Cambios

Compara la detección de cambios Default y OnPush, y aplica OnPush con datos inmutables y observables. Reduce significativamente los re-renderizados innecesarios en árboles de componentes grandes.