Angular — Iniciación

Este curso está dirigido a desarrolladores con conocimientos básicos de HTML, CSS, JavaScript y TypeScript que desean dar sus primeros pasos con Angular, el framework de Google para construir aplicaciones web de una sola página (SPA). A lo largo de las 10 horas de formación, el participante conocerá el propósito y la arquitectura fundamental de Angular, aprenderá a crear y estructurar proyectos con Angular CLI, y trabajará de forma guiada con los bloques esenciales del framework: componentes, data binding, directivas estructurales, ciclo de vida y enrutamiento básico. Al finalizar, el alumno será capaz de poner en marcha una pequeña aplicación Angular con navegación entre vistas, mostrando datos dinámicos desde el componente y sabiendo interpretar los mensajes de error más habituales del CLI y el navegador.

1. Describir el propósito de Angular como framework SPA y distinguirlo de soluciones basadas en JavaScript sin framework, identificando los casos de uso en los que su adopción aporta valor.
2. Ejecutar la creación de un proyecto Angular con Angular CLI y reconocer la responsabilidad de los archivos y carpetas clave que genera la herramienta.
3. Aplicar de forma guiada la creación e integración de componentes, los mecanismos de data binding (interpolación, property binding y event binding) y las directivas estructurales *ngIf y *ngFor para construir vistas dinámicas.
4. Identificar el hook de ciclo de vida ngOnInit y utilizarlo para inicializar datos en un componente, y configurar el enrutador básico de Angular para habilitar la navegación entre dos vistas mediante routerLink.
5. Reconocer e interpretar al menos dos errores frecuentes de compilación y de módulo durante el desarrollo, localizando su origen a partir de los mensajes del CLI y de la consola del navegador.

Bloque 1 — Angular y su ecosistema. Se introduce Angular como framework orientado a la construcción de SPAs, comparando su propuesta de valor con el desarrollo en JavaScript vanilla y delimitando los escenarios en los que resulta especialmente adecuado. Se analiza a continuación la estructura de un proyecto generado con ng new: qué son y para qué sirven main.ts, app.module.ts, app.component.ts y angular.json, y cómo se relacionan entre sí para arrancar la aplicación en el navegador.

Bloque 2 — Componentes y data binding. Este bloque aborda la unidad fundamental de Angular: el componente. Se practica su generación mediante ng generate component y su incorporación a la vista raíz usando el selector correspondiente. Sobre esos componentes se trabajan los tres tipos de enlace de datos básicos —interpolación {{ }}, property binding [ ] y event binding ( )— construyendo un componente funcional guiado que reacciona a eventos del usuario y refleja cambios en la vista.

Bloque 3 — Directivas estructurales y ciclo de vida. Se exploran *ngIf y *ngFor como mecanismos para controlar dinámicamente el DOM: mostrar u ocultar elementos según condiciones y renderizar listas a partir de arrays del componente. Paralelamente se estudia el hook ngOnInit, su lugar en el ciclo de vida del componente y cómo utilizarlo para ejecutar inicializaciones de datos antes de que la vista se pinte.

Bloque 4 — Enrutamiento básico y diagnóstico de errores. Se configura Angular Router para gestionar la navegación entre dos vistas, declarando rutas en el módulo de enrutamiento y usando routerLink en los templates. El bloque cierra con una sesión dedicada a la lectura e interpretación de los mensajes de error más comunes: errores de compilación de TypeScript y errores por módulo no declarado, desarrollando el criterio necesario para localizarlos y resolverlos de forma autónoma.

• Node.js 18 LTS o superior instalado en la máquina local.
• npm 9 o superior (incluido con Node.js).
• Angular CLI instalado globalmente (npm install -g @angular/cli; versión 17 o superior recomendada).
• Editor de código con soporte para TypeScript y Angular; se recomienda Visual Studio Code con la extensión oficial Angular Language Service.
• Navegador moderno (Chrome o Edge en versión actualizada) con las DevTools accesibles.
• Acceso a internet para la instalación de dependencias a través de npm durante la sesión.

Para aprovechar este curso el participante debe manejar HTML y CSS a nivel básico, conocer los fundamentos de JavaScript (variables, funciones, arrays, eventos DOM) y tener una familiaridad mínima con TypeScript (tipos, clases e interfaces). Se recomienda además haber utilizado alguna vez la terminal de comandos para ejecutar instrucciones simples.