🚀

Curso de Angular desde Cero con Angular 17

Jul 10, 2024

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.