Attualmente, il nostro task tracker è una semplice Single Page Application (SPA). Si carica sempre dallo stesso indirizzo nel browser (localhost:4200) e mostra sempre lo stesso contenuto, indipendentemente da tutto.

Tuttavia, vogliamo fare un passo avanti — permettendo agli utenti di navigare tra diverse sezioni dell'app utilizzando URL come /task/1, /settings o /analytics. Durante la navigazione tra questi URL, la pagina non deve ricaricarsi — solo il contenuto deve aggiornarsi dinamicamente all'interno della stessa finestra del browser.

Questo approccio definisce una SPA (Single Page Application) — l'intera applicazione viene caricata una sola volta e tutta la navigazione successiva avviene scambiando dinamicamente il contenuto.

È veloce e intuitivo per l'utente, ma richiede un sistema dedicato in grado di gestire i diversi URL. Qui entra in gioco il routing.

Che cos'è il Routing?

Nel nostro task tracker, potremmo avere sezioni diverse come un elenco di attività e una pagina dei dettagli di un'attività. Ad esempio:

• Quando l'utente naviga su /tasks, vogliamo mostrare un componente con un elenco di attività;

• Quando va su /tasks/42, vogliamo mostrare i dettagli dell'attività con ID 42.

Angular legge l'URL corrente e decide quale componente visualizzare — tutto senza ricaricare la pagina. In background, il file HTML rimane lo stesso, ma il contenuto viene sostituito dinamicamente. Per l'utente, sembra di navigare in un sito web tradizionale, ma tutto viene gestito all'interno della SPA.

In poche parole, il routing ci permette di indicare all'applicazione:

"Se l'utente va su /tasks, mostra il TaskListComponent. Se va su /tasks/42, mostra il TaskDetailsComponent."

Come funziona il routing in Angular

Angular fornisce uno strumento integrato chiamato RouterModule che semplifica la gestione della navigazione tra le viste.

Per il nostro task tracker, il routing offre molte funzionalità:

• Definizione delle rotte — ad esempio, collegare il percorso /tasks a un componente che mostra tutte le attività;

• Navigazione senza ricarica — accedere a /tasks/15 e visualizzare immediatamente i dettagli dell’attività 15;

• Visualizzazione di componenti diversi in base all’URL — come una lista di attività, un modulo per una nuova attività o le impostazioni;

• Utilizzo di parametri di rotta — come ID delle attività o filtri (/tasks?status=done);

• Creazione di rotte annidate — ad esempio, impostazioni utente all’interno di una sezione profilo (/profile/settings);

• Protezione delle rotte — come richiedere che gli utenti siano autenticati per accedere a /settings.

In pratica, basta definire un insieme di regole: quale percorso deve caricare quale componente. Angular si occupa del resto, gestendo automaticamente la navigazione e il rendering.

Dal punto di vista dell’utente, tutto funziona come un normale sito web: è possibile cliccare sui link, utilizzare i pulsanti avanti e indietro del browser e persino condividere link diretti a viste specifiche dell’app.