Curso de Angular

Bienvenido al Curso de Angular. Empieza desde cero y llega hasta el nivel profesional con Angular moderno desde el primer día: componentes standalone, señales, zoneless, inject() y el nuevo control de flujo. Cada módulo se apoya en una aplicación de gestión real, la EMPRESA de los demás cursos, y todos los ejemplos se han compilado y ejecutado con las versiones indicadas.

Es adecuado para el segundo curso de los ciclos formativos de DAW y DAM, para asignaturas universitarias de desarrollo web y para profesionales que vengan de versiones antiguas de Angular.

💡 Consejo: Necesitas saber JavaScript moderno. Si no es así, empieza por el Curso de JavaScript, y por el Curso de HTML5, CSS3 y Bootstrap si te falta la base. TypeScript se explica en el módulo 02.

¿Qué vas a aprender?

Al finalizar este curso serás capaz de:

  • Crear componentes y plantillas con el control de flujo moderno
  • Dominar las señales, la detección de cambios y zoneless
  • Organizar la aplicación con servicios e inyección de dependencias
  • Navegar con el Router: carga perezosa, guards, resolvers y más
  • Consumir APIs con HttpClient, resource y httpResource
  • Usar RxJS y combinarlo con señales
  • Construir formularios por plantilla, reactivos y con Signal Forms
  • Gestionar el estado con servicios y NgRx SignalStore
  • Crear interfaces accesibles con Angular Material, CDK y Angular Aria
  • Mejorar el rendimiento con @defer, SSR e hidratación
  • Probar con Vitest y Playwright, y desplegar con Docker
  • Migrar proyectos antiguos y actualizar de la versión 21 a la 22

Versión del curso

El curso utiliza Angular 22.2, en soporte activo, con TypeScript 6.0, Vitest 5, RxJS 7.8, Angular Material 22 y NgRx 22. Solo se enseñan versiones estables: nada de next.

¿Qué versión elegir?

Angular 22 no es LTS. La última LTS es Angular 21, con soporte hasta junio de 2027. Si eliges la LTS, la mayor parte del curso te sirve igual, pero debes saber esto:

Si eliges Angular 21 (LTS) Qué ocurre
No tendrás @Service, injectAsync, withXhr, linkedSignal con set, @boundary, miembros privados en plantillas, minDate y maxDate
Son experimentales Signal Forms, resource, httpResource y rxResource: existen, pero pueden cambiar. En Signal Forms hay diferencias de API
Es developer preview @angular/aria, con una API bastante distinta
Funciona distinto Los componentes no son OnPush por defecto, HttpClient usa XHR, ?. en plantillas da null y las rutas hijas no heredan los parámetros
Necesitas TypeScript 5.9, Material 21, CDK 21 y NgRx 21

La guía de versiones reúne todos los apartados afectados, con lo que tienes que hacer en cada caso.

Recursos para descargar

  • API de ejemplo para todo el curso: empresa-api.zip. Solo necesita Node 22 o superior: se arranca con node server.mjs.
  • Proyecto completo del módulo 29: empresa-angular.zip.

Estructura del curso

El curso se divide en 30 módulos agrupados en 6 bloques:

Bloque 1: Fundamentos (Módulos 00-07)

Módulo Tema Descripción
00 Introducción a Angular Qué es Angular, versiones, activa y LTS
01 Entorno y Angular CLI ng new, estructura, generadores, pruebas y servidor MCP
02 TypeScript para Angular Tipos, genéricos, clases, decoradores y strict
03 Componentes Anatomía, encapsulación, ciclo de vida y componentes dinámicos
04 Plantillas Enlaces, @if, @for, @switch, @let y ng-template
05 Señales signal, computed, effect y linkedSignal
06 Comunicación entre componentes input(), output(), model(), viewChild y proyección
07 Directivas y pipes Directivas, hostDirectives, pipes y locales

Bloque 2: Arquitectura (Módulos 08-11)

Módulo Tema Descripción
08 Servicios e inyección de dependencias @Service, inyectores, tokens y injectAsync
09 Detección de cambios Zoneless, OnPush por defecto, Eager y depuración
10 Router Rutas, enlaces, parámetros y carga perezosa
11 Router avanzado Guards, resolvers, precarga y recursos de ruta

Bloque 3: Datos (Módulos 12-15)

Módulo Tema Descripción
12 HttpClient fetch por defecto, errores, interceptores y CRUD
13 Resources: datos asíncronos con señales resource, httpResource y rxResource
14 RxJS fundamental Observables, operadores, Subjects y fugas
15 RxJS y señales toSignal, toObservable y cuándo usar cada mundo

Bloque 4: Formularios y estado (Módulos 16-19)

Módulo Tema Descripción
16 Formularios por plantilla FormsModule, ngModel y validación
17 Formularios reactivos FormGroup, FormArray, tipado y ControlValueAccessor
18 Signal Forms form, schema, FormField, validación y envío
19 Gestión del estado Servicios con señales, NgRx SignalStore y Store clásico

Bloque 5: Interfaz (Módulos 20-22)

Módulo Tema Descripción
20 Angular Material y CDK Tema M3, tablas, diálogos, overlay y drag and drop
21 Angular Aria y accesibilidad Patrones WAI-ARIA, foco, teclado y axe
22 Estilos: Tailwind en Angular Tailwind 4, modo oscuro y animaciones nativas

Bloque 6: Producción (Módulos 23-29)

Módulo Tema Descripción
23 Rendimiento y @defer @defer, NgOptimizedImage, @boundary y presupuestos
24 SSR e hidratación Modos de renderizado, prerender e hidratación incremental
25 Internacionalización y PWA @angular/localize, service worker y modo sin conexión
26 Testing Vitest, TestBed, HTTP, Router, formularios y Playwright
27 Despliegue y herramientas con IA Docker, CI, seguridad, MCP y WebMCP
28 Migraciones y Angular clásico NgModule, *ngIf, Zone.js y paso a paso de 21 a 22
29 Proyecto final Aplicación EMPRESA completa, con login, guards, CRUD y pruebas

Requisitos

  • JavaScript moderno y nociones de HTML y CSS
  • Node 22.22 o superior y un editor (Visual Studio Code recomendado)
  • Docker para el módulo de despliegue (se explica cuándo hace falta)

Convenciones utilizadas

A lo largo del curso encontrarás estos indicadores:

📘 Concepto: Explicación teórica de un concepto importante.

💻 Ejemplo: Código de ejemplo que puedes copiar y ejecutar.

✏️ Ejercicio: Práctica para que resuelvas por tu cuenta.

⚠️ Importante: Información crucial que debes recordar.

💡 Consejo: Trucos y buenas prácticas profesionales.

Table of contents