Configuration du Routage dans Angular
Pour que tout fonctionne, il faut indiquer à Angular quelle URL affiche quel composant. C'est ce qu'on appelle le routage. Commençons !
Le fichier principal de routage
Lorsque vous créez une application Angular avec le CLI, vous pouvez activer le routage dès le départ — il suffit de répondre "Oui" à la question concernant le routage. Angular créera alors les fichiers nécessaires pour vous (ce que nous avons déjà fait lors de la création de l'application). L'un de ces fichiers est app.routes.ts.
Si, pour une raison quelconque, vous n'avez pas ce fichier, ne vous inquiétez pas — vous pouvez le créer vous-même à la racine de votre projet. Il devrait ressembler à ceci :
routes.ts
Ce fichier indique à Angular quelles routes existent dans votre application et quels composants afficher pour chaque route.
Assurez-vous également que vos routes sont connectées dans app.config.ts de la manière suivante :
config.ts
Sans la ligne provideRouter(routes), Angular ne connaîtra pas vos routes, même si elles sont définies dans app.routes.ts.
Configuration des routes
Ajoutons maintenant des routes pour notre application Task Tracker. Ouvrez app.routes.ts et écrivez le code suivant :
routes.ts
Il s'agit simplement d'un tableau de routes que nous exportons. Chaque route est un objet avec les paramètres suivants :
-
path— le chemin d’URL ; -
component— le composant à afficher lors de la navigation vers ce chemin.
Dans notre cas, nous avons deux routes :
La page principale affichant la liste des tâches.
routes.ts
Lorsqu’un utilisateur visite l’URL racine (localhost:4200/), Angular affichera le TaskListComponent.
Page de détails de la tâche affichant les informations d’une tâche individuelle :
routes.ts
Ici, :id est un paramètre dynamique. Angular comprend que :id peut prendre n'importe quelle valeur (comme /task/1, /task/42, etc.). Cette valeur est automatiquement transmise à TaskDetailsComponent, et vous pouvez l'utiliser pour récupérer les données de cette tâche spécifique.
Ainsi, lorsqu'un utilisateur accède à localhost:4200/task/1, Angular affichera TaskDetailsComponent avec les détails pour la tâche n°1.
Pour l'instant, rien ne fonctionnera encore car nous avons seulement défini les routes, mais nous ne les avons pas encore entièrement reliées à nos composants. Nous allons effectuer cette connexion dans le prochain chapitre !
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you show me how to connect the routes to the components?
How do I use the dynamic :id parameter in TaskDetailsComponent?
What should I do if I didn't enable routing when creating the app?
Awesome!
Completion rate improved to 3.13Configuration du Routage dans Angular
Glissez pour afficher le menu
Pour que tout fonctionne, il faut indiquer à Angular quelle URL affiche quel composant. C'est ce qu'on appelle le routage. Commençons !
Le fichier principal de routage
Lorsque vous créez une application Angular avec le CLI, vous pouvez activer le routage dès le départ — il suffit de répondre "Oui" à la question concernant le routage. Angular créera alors les fichiers nécessaires pour vous (ce que nous avons déjà fait lors de la création de l'application). L'un de ces fichiers est app.routes.ts.
Si, pour une raison quelconque, vous n'avez pas ce fichier, ne vous inquiétez pas — vous pouvez le créer vous-même à la racine de votre projet. Il devrait ressembler à ceci :
routes.ts
Ce fichier indique à Angular quelles routes existent dans votre application et quels composants afficher pour chaque route.
Assurez-vous également que vos routes sont connectées dans app.config.ts de la manière suivante :
config.ts
Sans la ligne provideRouter(routes), Angular ne connaîtra pas vos routes, même si elles sont définies dans app.routes.ts.
Configuration des routes
Ajoutons maintenant des routes pour notre application Task Tracker. Ouvrez app.routes.ts et écrivez le code suivant :
routes.ts
Il s'agit simplement d'un tableau de routes que nous exportons. Chaque route est un objet avec les paramètres suivants :
-
path— le chemin d’URL ; -
component— le composant à afficher lors de la navigation vers ce chemin.
Dans notre cas, nous avons deux routes :
La page principale affichant la liste des tâches.
routes.ts
Lorsqu’un utilisateur visite l’URL racine (localhost:4200/), Angular affichera le TaskListComponent.
Page de détails de la tâche affichant les informations d’une tâche individuelle :
routes.ts
Ici, :id est un paramètre dynamique. Angular comprend que :id peut prendre n'importe quelle valeur (comme /task/1, /task/42, etc.). Cette valeur est automatiquement transmise à TaskDetailsComponent, et vous pouvez l'utiliser pour récupérer les données de cette tâche spécifique.
Ainsi, lorsqu'un utilisateur accède à localhost:4200/task/1, Angular affichera TaskDetailsComponent avec les détails pour la tâche n°1.
Pour l'instant, rien ne fonctionnera encore car nous avons seulement défini les routes, mais nous ne les avons pas encore entièrement reliées à nos composants. Nous allons effectuer cette connexion dans le prochain chapitre !
Merci pour vos commentaires !
