Actualmente, nuestro gestor de tareas es una simple Aplicación de Página Única (SPA). Siempre se carga desde la misma dirección en el navegador (localhost:4200) y muestra el mismo contenido, sin importar qué.

Pero queremos ir un paso más allá: permitir a los usuarios navegar a diferentes secciones de la aplicación utilizando URLs como /task/1, /settings o /analytics. Al navegar entre estas URLs, la página no debe recargarse; en su lugar, solo el contenido debe actualizarse dinámicamente dentro de la misma ventana del navegador.

Este enfoque es lo que define una SPA (Aplicación de Página Única): toda la aplicación se carga una vez y toda la navegación posterior ocurre intercambiando el contenido dinámicamente.

Es rápido y fácil de usar, pero requiere un sistema dedicado que entienda cómo manejar diferentes URLs. Ahí es donde entra el enrutamiento.

¿Qué es el enrutamiento?

En nuestro gestor de tareas, podemos tener diferentes secciones como una lista de tareas y una página de detalles de tareas. Por ejemplo:

• Cuando el usuario navega a /tasks, queremos mostrar un componente con una lista de tareas;

• Cuando accede a /tasks/42, queremos mostrar los detalles de la tarea con ID 42.

Angular lee la URL actual y decide qué componente mostrar, todo sin recargar la página. En segundo plano, sigue siendo el mismo archivo HTML, pero el contenido se reemplaza dinámicamente. Para el usuario, parece que navega por un sitio web tradicional, pero todo se gestiona dentro de la SPA.

En resumen, el enrutamiento nos permite indicar a la aplicación:

"Si el usuario va a /tasks, muestra el TaskListComponent. Si va a /tasks/42, muestra el TaskDetailsComponent."

Cómo funciona el enrutamiento en Angular

Angular proporciona una herramienta integrada llamada RouterModule que facilita la gestión de la navegación entre vistas.

Para nuestro gestor de tareas, el enrutamiento nos brinda muchas ventajas:

• Definir rutas — por ejemplo, vincular la ruta /tasks a un componente que muestre todas las tareas;

• Navegar sin recargar — ir a /tasks/15 y ver inmediatamente los detalles de la tarea 15;

• Mostrar diferentes componentes según la URL — como una lista de tareas, un formulario para nueva tarea o configuraciones;

• Usar parámetros de ruta — como IDs de tareas o filtros (/tasks?status=done);

• Crear rutas anidadas — por ejemplo, configuraciones de usuario dentro de la sección de perfil (/profile/settings);

• Proteger rutas — como requerir que los usuarios inicien sesión para acceder a /settings.

En la práctica, solo se define un conjunto de reglas: qué ruta debe cargar qué componente. Angular se encarga del resto, gestionando la navegación y el renderizado automáticamente.

Desde el punto de vista del usuario, todo funciona como un sitio web tradicional: pueden hacer clic en enlaces, usar los botones de retroceso y avance del navegador, e incluso compartir enlaces directos a vistas específicas de la aplicación.