Curso de desarrollo con Angular

Lección 1 • Generando tu primer proyecto Angular

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

Lección 2 • Configurando el entorno de desarrollo

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

Lección 3 • Fundamentos de TypeScript para Angular

Presenta los tipos, interfaces, decoradores y módulos de TypeScript tal como se usan en Angular. Garantiza 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. Redondea las capacidades de las plantillas antes de pasar a los servicios.

Lección 3 • Directivas estructurales integradas

Cubre ngIf, ngFor y ngSwitch para el renderizado condicional y de listas en plantillas. Permite 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 en profundidad

Explora la jerarquía del inyector de Angular, los tokens de proveedor y el ámbito de inyección. Permite un control preciso sobre la instanciación de servicios y su uso compartido 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 Angular.

Lección 3 • Comprendiendo los NgModules

Explica las declaraciones, importaciones, exportaciones y proveedores en los metadatos de NgModule. Establece el sistema de módulos que organiza cada aplicación Angular.

Lección 1 • Guards de ruta y resolvers

Protege rutas con guards CanActivate y CanDeactivate y precarga datos con Resolve. Asegura una navegación segura y datos precargados antes del renderizado del componente.

Lección 2 • Rutas hijas y outlets con nombre

Anida rutas hijas dentro de módulos de funcionalidad y utiliza outlets con nombre 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 del paquete inicial. 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. Permite 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

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

Lección 3 • Operadores RxJS principales

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 • Simulando HTTP en desarrollo

Utiliza 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 • Manejo de errores y estrategias de reintento

Maneja errores HTTP con los operadores catchError, retry y retryWhen para llamadas a la API resilientes. Asegura una degradación gradual y una retroalimentación de errores fácil de usar.

Lección 3 • Interceptores HTTP

Crea interceptores para adjuntar tokens de autenticación, registrar solicitudes y transformar respuestas globalmente. Centraliza las preocupaciones transversales de 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 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 añadir múltiples direcciones o líneas de pedido.

Lección 2 • Fundamentos de formularios reactivos

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

Lección 3 • UX de formularios y accesibilidad

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

Lección 4 • Validadores personalizados y validación asíncrona

Escribe validadores personalizados síncronos y asíncronos para comprobaciones 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 de almacén NgRx para estado escalable. Prepara a los estudiantes para elegir la estrategia de estado adecuada 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 plantilla de Angular para necesidades específicas del dominio.

Lección 3 • Proyección de contenido y componentes dinámicos

Utiliza ng-content para proyección de una y múltiples ranuras y crea componentes dinámicamente en tiempo de ejecución. Permite componentes de biblioteca 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 rerenderizados innecesarios en árboles de componentes