Angular 17

Introducción a Angular 17

• ¿Qué es Angular?
• Angular vs React vs Vue
• Resumen de las funcionalidades y la arquitectura de Angular 17
• Configuración del entorno de desarrollo

Comenzando

• Creación de un nuevo proyecto de Angular 17 utilizando Angular CLI
• Exploración de la estructura del proyecto y sus archivos
• Ejecución y servidor de la aplicación
• Mostrado de datos mediante interpolación y expresiones

Componentes

• Comprensión del papel de los componentes en Angular 17
• Creación y uso de componentes
• Pasado de datos entre componentes usando inputs y outputs
• Uso de ganchos de ciclo de vida de componentes (lifecycle hooks)

Directivas

• Comprensión de la diferencia entre directivas estructurales y directivas de atributos
• Creación y uso de directivas integradas como ngIf, ngFor, ngSwitch, etc.
• Creación y uso de directivas personalizadas

Pipes

• Comprensión del propósito de los pipes en Angular 17
• Creación y uso de pipes integrados como date, currency, json, etc.
• Creación y uso de pipes personalizados

Servicios

• Comprensión del papel de los servicios en Angular 17
• Creación y uso de servicios
• Inyección de dependencias usando proveedores (providers)

Módulos

• Comprensión del papel de los módulos en Angular 17
• Creación y uso de módulos
• Importación y exportación de módulos

Enlazado de Datos (Data Binding)

• Comprensión de la diferencia entre el enlazado de datos unidireccional y bidireccional
• Creación y uso de enlazado de propiedades, enlazado de eventos y sintaxis banana-in-a-box
• Uso de variables de referencia de plantilla (template reference variables)

Enrutamiento (Routing)

• Comprensión del papel del enrutamiento en Angular 17
• Creación y configuración de rutas
• Navegación entre rutas usando routerLink y router.navigate()
• Uso de parámetros de ruta, parámetros de consulta y fragmentos

Formularios

• Comprensión de la diferencia entre formularios basados en plantilla (template-driven) y formularios reactivos
• Creación y validación de formularios usando controles de formulario, grupos de formulario, arreglos de formulario, etc.
• Uso de validadores integrados como required, minLength, maxLength, etc.
• Creación y uso de validadores personalizados

Cliente HTTP

• Comprensión del papel del cliente HTTP en Angular 17
• Creación y uso de solicitudes HTTP para comunicarse con servicios de backend
• Uso de observables para manejar flujos de datos asíncronos
• Uso de interceptores para modificar o manejar solicitudes o respuestas HTTP

Nuevo Flujo de Control Declarativo

• Explicación de la nueva sintaxis de bloques de control de plantillas y cómo simplifica tareas comunes como el renderizado condicional, los bucles y el manejo de colecciones vacías
• Proporcionar ejemplos de uso de los nuevos bloques, como @if, @else, @switch, @case, @default, @for y @empty
• Comparación de la nueva sintaxis con la anterior, como *ngIf, *ngSwitch y *ngFor
• Mencionar cómo los nuevos bloques de control admiten aplicaciones sin zona (zoneless) con señales (signals)

Bloques de Carga Diferida

• Explicación del concepto de carga diferida y cómo puede mejorar el rendimiento y la experiencia de usuario de las aplicaciones web
• Introducción al nuevo bloque de control @defer que permite la carga diferida del contenido del bloque y sus dependencias
• Proporcionar ejemplos de uso del bloque @defer para diferentes escenarios, como la carga de componentes, directivas, pipes, animaciones y estilos
• Mencionar cómo el bloque @defer trabaja con la nueva API de transiciones de vista

API de Transiciones de Vista

• Explicación del propósito y los beneficios de la API de transiciones de vista, que permite a los desarrolladores personalizar las animaciones y transiciones entre vistas
• Introducción a la nueva directiva withViewTransitions que habilita el uso de la API de transiciones de vista
• Proporcionar ejemplos de uso de la directiva withViewTransitions con diferentes tipos de transición, como fade, slide, zoom y flip
• Mencionar cómo la API de transiciones de vista trabaja con el enrutador de Angular y el historial del navegador

Otras Funcionalidades y Mejoras

• Resumen breve de algunas de las otras funcionalidades y mejoras que ofrece Angular 17, como:
• Soporte para pasar @Component.styles como una cadena de texto
• El código de animaciones de Angular es cargable diferido (lazy-loadable)
• Soporte para TypeScript 5.2
• La API de señales (signals) central está ahora estable
• Se ha eliminado el soporte para Node.js v16 y la versión mínima de soporte es v18.13.0
• Esbuild será el constructor predeterminado y el servidor de desarrollo predeterminado utilizará Vite