Actuellement, notre gestionnaire de tâches est une simple application monopage (SPA). Elle se charge toujours à partir de la même adresse dans le navigateur (localhost:4200) et affiche toujours le même contenu, quelle que soit la situation.

Cependant, nous souhaitons aller plus loin — en permettant aux utilisateurs de naviguer vers différentes sections de l'application à l'aide d'URL telles que /task/1, /settings ou /analytics. Lors de la navigation entre ces URL, la page ne doit pas se recharger — seul le contenu doit être mis à jour dynamiquement dans la même fenêtre du navigateur.

Cette approche définit une SPA (Single Page Application) — l'ensemble de l'application se charge une seule fois, et toute la navigation ultérieure s'effectue en échangeant dynamiquement le contenu.

C'est rapide et convivial, mais cela nécessite un système dédié capable de gérer différentes URL. C'est là qu'intervient le routage.

Qu'est-ce que le routage ?

Dans notre gestionnaire de tâches, nous pouvons avoir différentes sections comme une liste de tâches et une page de détails d'une tâche. Par exemple :

• Lorsque l'utilisateur navigue vers /tasks, nous souhaitons afficher un composant avec une liste de tâches ;

• Lorsqu'il va sur /tasks/42, nous voulons afficher les détails de la tâche avec l'ID 42.

Angular lit l'URL actuelle et décide quel composant afficher — le tout sans recharger la page. En arrière-plan, il s'agit toujours du même fichier HTML, mais le contenu est remplacé dynamiquement. Pour l'utilisateur, cela donne l'impression de naviguer sur un site web traditionnel, mais tout est géré à l'intérieur de la SPA.

En résumé, le routage nous permet d'indiquer à l'application :

« Si l'utilisateur va sur /tasks, afficher le TaskListComponent. S'il va sur /tasks/42, afficher le TaskDetailsComponent. »

Fonctionnement du routage dans Angular

Angular fournit un outil intégré appelé RouterModule qui facilite la gestion de la navigation entre les vues.

Pour notre gestionnaire de tâches, le routage offre de nombreuses possibilités :

• Définir des routes — par exemple, lier le chemin /tasks à un composant affichant toutes les tâches ;

• Naviguer sans recharger la page — accéder à /tasks/15 et voir immédiatement les détails de la tâche 15 ;

• Afficher différents composants selon l’URL — comme une liste de tâches, un formulaire de nouvelle tâche ou les paramètres ;

• Utiliser des paramètres de route — tels que des identifiants de tâche ou des filtres (/tasks?status=done) ;

• Créer des routes imbriquées — par exemple, les paramètres utilisateur dans une section de profil (/profile/settings) ;

• Protéger des routes — comme exiger que les utilisateurs soient connectés pour accéder à /settings.

En pratique, il suffit de définir un ensemble de règles : quel chemin doit charger quel composant. Angular s’occupe du reste, gérant automatiquement la navigation et l’affichage.

Du point de vue de l’utilisateur, tout fonctionne comme sur un site web classique : il peut cliquer sur des liens, utiliser les boutons précédent et suivant du navigateur, et même partager des liens directs vers des vues spécifiques de l’application.