Al momento, 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.

Ma 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 il contenuto in tempo reale.

È veloce e intuitivo per l'utente, ma richiede un sistema dedicato che sappia 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 dell'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 sintesi, 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 visualizzazioni.

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

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

• Navigare senza ricaricare — andare su /tasks/15 e vedere immediatamente i dettagli dell'attività 15;

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

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

• Creare rotte annidate — ad esempio, impostazioni utente all'interno della sezione profilo (/profile/settings);

• Proteggere le 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 — possono cliccare sui link, usare i pulsanti avanti e indietro del browser e persino condividere link diretti a viste specifiche dell'app.