Curso de Angular desde Cero con Angular 17 Incluido

Bienvenida

• Entusiasmo por el lanzamiento de Angular 17 (recién salido hace una semana).
• Consideraciones sobre Angular como un framework robusto y de gran uso en industrias como seguros y bancos.
• Comparativa rápida con React, destacando la robustez de Angular.
• Cursos gratuitos en YouTube disponibles sobre Angular.
• Uso de un repositorio GitHub para ver las instalaciones necesarias:
  • Google Chrome
  • Visual Studio Code
  • Git
  • Node.js
  • TypeScript
  • Postman
  • Angular Snippets
  • Angular Language Service
  • Angular Essentials
• Exploración de documentación oficial y complementos como Bootstrap y Angular Material.

Preparación e Instalaciones

• Navegador: Google Chrome, recomendado por sus DevTools.
• Editor: Visual Studio Code, incluyendo Plugins y extensiones.
• Sistema de versiones: Git, importante para el manejo de versiones y trabajo colaborativo.
• Entorno de Desarrollo: Node.js, se recomienda instalar la versión LTS.
• Lenguaje: TypeScript, nativamente soportado por Angular, sin necesidad de instalación adicional específica.
• Herramienta de clientes: Postman, útil para pruebas de API antes de la implementación.
• Complementos: Angular Snippets, Angular Language Service, Angular Essentials, para mejorar la experiencia de desarrollo en VS Code.
• Estilos y Componentes: Uso de Bootstrap (CSS) y Angular Material (componentes preconstruidos).
• Herramientas de Desarrollo: Angular Dev Tools para inspección de aplicaciones Angular.

Curso Angular

• Preparación del Entorno: Instalación de Angular CLI, Angular16 inicialmente por compatibilidad y actualización a Angular17.
• Componentes Básicos: Configuración inicial y explicación de archivos importantes como package.json, angular.json, tsconfig.json.
• Primer Proyecto: Creación de una nueva aplicación con Angular CLI.
  • Uso de ng new
  • Configuración inicial del proyecto
  • Levantamiento del proyecto con npm start.
• Exploración de la estructura: Revisión del código base creado por Angular CLI, introducción a conceptos como módulos, componentes, servicios, y dependencias.

Conceptos Importantes

• Modelo Vista Controlador (MVC): Separación de datos, lógica de negocio y la interfaz de usuario en componentes independientes.
  • Modelo: Representa datos y lógica de negocio de la aplicación.
  • Vista: Presenta la interfaz del usuario, HTML + CSS.
  • Controlador: Maneja la interacción del usuario y actualización de la vista.
• CLI de Angular: Herramientas provistas por Angular para la creación y gestión de proyectos Angular.

Estructuras Básicas

• Modularización: Organización del código en módulos para encapsulación y reutilización.
• Componentes: Elementos fundamentales que definen cómo se ve y se comporta la interfaz de usuario.
  • Ejemplo de creación de componentes con ng generate component.
  • Diferencias entre módulos y componentes.

Enlace de Datos (Data Binding)

• Unidireccional y Bidireccional: Comunicación entre modelo y vista usando interpolaciones y manejo de eventos.
• Ejemplo Práctico: Contador reactivo usando ngModel, eventos click para incrementar y decrementar.
• Métodos Importantes: ngModel, ngIf, ngFor, cómo se usa la propiedad binding y event binding.

Comunicación entre Componentes

• Input y Output: Decoradores @Input y @Output, uso de EventEmitter para emitir eventos personalizados.
• Ejemplo Práctico: Comunicación entre componentes padre e hijo.
• Servicios: Uso de servicios para compartir datos y lógica entre componentes, el patrón Singleton.
• Inyección de Dependencias: Uso del decorador Inject para servicios.
• Ejemplo: Implementación de un servicio de pivote para comunicar entre hermanos.

Directivas y Pipes

• Directivas Personalizadas: Creación y uso de directivas como @Directive para manipulación del DOM.
• Pipes Personalizados: Transformaciones de datos en las vistas, creación de pipes personalizados.
• Uso de Pipes Integrados: Ejemplos de pipes como DatePipe, UpperCasePipe, CurrencyPipe.

Ruteo (Enrutamiento)

• Configuración Inicial: Definición de rutas en app-routing.module.ts.
• Router Outlet y Router Link: Uso de RouterOutlet y RouterLink para navegación entre componentes.
• Parámetros de Ruta: Manejo de rutas con parámetros dinámicos, ejemplo de lista de productos y detalle del producto.
• Lazy Loading: Carga diferida de módulos para optimización.

Formularios

• Tipos: Formularios basados en plantillas y formularios reactivos.
• Ejemplo con Formularios Reactivos: Uso de FormGroup, FormBuilder, y validadores.
• Validaciones de Formularios: Manejando validaciones y mostrando errores en formularios.
• Ejemplo Práctico: Creación y validación de un formulario de contacto.

Ciclo de Vida de Componentes

• Hooks de Ciclo de Vida: ngOnInit, ngOnChanges, ngOnDestroy, cómo y cuándo usarlos.
• Ejemplo: Uso de hooks para inicializar datos y desuscribirse de eventos.

Servicios HTTP

• Consumir APIs: Uso de HttpClientModule para realizar peticiones HTTP.
• Ejemplo Práctico: Consulta de una API de productos típica con Angular.
• Inyección y Manejo de Respuestas: Manejo de Observable, habilidades para gestionar respuestas y errores HTTP.

Novedades de Angular 16 y 17

• Nuevas Funcionalidades: Signals, Injection API simplificada, Módulos Standalone, enfasis en el rendimiento y ergonomía para desarrolladores.
• Ejemplos Prácticos en Angular17: Standalone components, nueva sintaxis de estructuras de control, vistas aplazadas, hooks de ciclo de vida después del rendering.

Proyecto Final

• Lista de Tareas: Creación de una aplicación sencilla para gestionar tareas locales usando localStorage.
• Publicación: Subida del proyecto en GitHub, despliegue usando Netlify.
• Landing Page Completa: Creación de una aplicación Landing Page en Angular 17 con rutas, formularios, y una estructura completa.

Despedida

• Palabras Finales: Felicidad por haber compartido conocimientos, expectativas de que el curso sirva en la búsqueda de empleo.
• Petición: Suscripción y comentarios para incentivarme a hacer más contenido gratuito.