Desarrollo de Aplicaciones Web con Angular

Material docente del curso de Angular, actualizado a Angular 22 (componentes standalone, signals, zoneless, control de flujo @if/@for, inject(), httpResource, etc.). El repositorio contiene los ejemplos que se explican en las transparencias, los ejercicios propuestos (con su solución), las propias transparencias en markdown y una batería de tests funcionales.

Si vienes de versiones anteriores de Angular, en CHANGES.md tienes un mapa de los cambios de la 11 a la 22 (módulos → standalone, *ngIf → @if, observables → httpResource, etc.).

Estructura del repositorio

Carpeta	Contenido
ejemN/	Ejemplos del material (ejem0, ejem1, …).
ejerN/	Ejercicios propuestos, con su solución implementada (ejer1, ejer2, …).
*_backend/	Backends que acompañan a algunos ejemplos/ejercicios (Spring Boot en Java o Node).
slides/	Transparencias del curso en markdown, una por tema, con diagramas SVG.
tests/	Tests funcionales (Playwright) que validan el comportamiento descrito en el material.
CHANGES.md	Mapa de cambios Angular 11 → Angular 22.

Cada proyecto Angular sigue la estructura estándar generada por ng new: el código fuente está en src/app/, los recursos estáticos en public/ y la configuración en angular.json.

Arrancar un ejemplo

git clone <repo>
cd <ejemplo>      # p. ej. ejem1
npm install
ng serve

La aplicación queda disponible en http://localhost:4200.

Slides

Las transparencias están en slides/, redactadas como manual. Hay un documento por tema y las imágenes/diagramas en slides/images/temaN/:

1. Introducción a Angular: TypeScript y herramientas
2. Componentes
3. APIs REST y Servicios
4. Aplicaciones Multipágina — Router
5. Librerías de Componentes
6. Publicación

Ejemplos

Proyectos que se muestran y explican en las transparencias.

Tema 1 — Introducción

Ejemplo	Descripción
ejem0	Proyecto base generado con ng new --zoneless: estructura de un proyecto Angular.
ejem1	Primer componente standalone ("My First Angular App").

Tema 2 — Componentes

Ejemplo	Descripción
ejem2	Interpolación de signals en la plantilla ({{ name() }}, atributos).
ejem3	Eventos y actualización de estado con signal.set().
ejem4	Enlace bidireccional con ngModel sobre signals.
ejem5	Control de flujo @if/@for/@switch y enlace de clases y estilos.
ejem6	Formularios template-driven (inputs, radios, checkboxes, select) y viewChild().
ejem6a	Signal Forms (@angular/forms/signals): form(), [formField] y validación.
ejem7	Composición de componentes (componente hijo Header).
ejem8	Paso de datos de padre a hijo con input().
ejem9	Comunicación de hijo a padre con output().

Tema 3 — APIs REST y Servicios

Ejemplo	Descripción
ejem10	Peticiones HTTP con httpResource() (buscador de Google Books).
ejem10b	Configuración de proxy (proxy.conf.json) para evitar CORS en desarrollo.
ejem11	Servicio con datos en memoria (BookStore).
ejem12	Servicio que encapsula httpResource y ofrece datos de alto nivel.
ejem13	Manejo de errores del recurso (error()).
ejem14	Indicador de carga (isLoading()).
ejem15	Mostrar los estados de carga y error en la plantilla.

Tema 4 — Router

Ejemplo	Descripción
ejem16	Router: provideRouter, <router-outlet>, routerLink, listado y detalle con input binding.
ejem16b	Reutilización de instancia al navegar al mismo componente con distinto id (Prev/Next).

Tema 5 — Librerías de componentes

Ejemplo	Descripción
ejem17	Bootstrap CSS (clases de estilo).
ejem18	ng-bootstrap (componentes JavaScript: nav/tabs).
ejem19	Angular Material (blog con mat-toolbar, MatDialog y mat-table).

Tema 6 — Publicación

Ejemplo	Descripción
ejem23 + ejem23_backend	Build y despliegue sobre Spring Boot servido desde la raíz; SPAController para el fallback de rutas.
ejem24 + ejem24_backend	Despliegue de la SPA bajo una subruta (/spa).

Ejercicios

Enunciados propuestos en el material con su solución implementada en el repositorio.

Ejercicio	Tema	Descripción
ejer1	2	Control de flujo y enlace de datos.
ejer1b	2	Variante del ejercicio 1 usando template reference variables.
ejer2	2	Formularios.
ejer3	2	Comunicación entre componentes.
ejer4 + ejer4_backend	3	Lectura REST contra un backend propio (Java / Node).
ejer5	3	Escritura REST (alta de elementos con firstValueFrom).
ejer5b	3	Amplía ejer5 con indicadores de carga y error.
ejer6 + ejer6_backend	4	CRUD completo con router y backend.

Los backends ejer4_backend y ejer6_backend incluyen dos implementaciones equivalentes, en java/ y en node/, para poder usar la que se prefiera.

Tests

En tests/ hay tests funcionales con Playwright que arrancan los ejemplos y comprueban que se comportan como describe el material. Hay un fichero de especificación por tema (specs/temaN.spec.ts). Consulta tests/README.md para ejecutarlos.

Mejoras

Hay algunos aspectos del material que podrían mejorarse:

• Se pueden poner más ejemplos sobre el cambio de objetos y arrays en señales (como los que están en el material de React)
• En el consumo de API REST se presenta desde el principio con httpResource, pero tiene sentido también que se use con httpClient directamente. Por ejemplo cuando se hace una llamada de forma explícita a un método.
• Hay que revisar el orden de configurar el provider de httpClient, porque creo que está al revés.
• Hay que indicar que las librerías de gráficos tienen que ser compatibles con zoneless (porque puede haber algunas que no sean compatibles)
• Los backends se pueden actualizar como están actualizados los del meterial de React.
• Habría que quitar las referencias a las estrategias no modernas (ActivatedRoute y cosas así)