Configuration du Routage dans Angular
Pour que tout fonctionne, il est nécessaire d’indiquer à Angular quelle URL affiche quel composant. Ce processus s’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ébut — il suffit de répondre « Oui » lorsque la question sur le routage apparaît. 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, ce fichier n’existe pas, 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
Ajout des routes pour notre application Task Tracker. Ouvrir app.routes.ts et saisir 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 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 task №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 connectées à nos composants. Cela sera fait 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 explain how to connect the routes to the components?
What should I do if my app.routes.ts file is missing?
How do I use the dynamic :id parameter in TaskDetailsComponent?
Awesome!
Completion rate improved to 3.13Configuration du Routage dans Angular
Glissez pour afficher le menu
Pour que tout fonctionne, il est nécessaire d’indiquer à Angular quelle URL affiche quel composant. Ce processus s’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ébut — il suffit de répondre « Oui » lorsque la question sur le routage apparaît. 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, ce fichier n’existe pas, 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
Ajout des routes pour notre application Task Tracker. Ouvrir app.routes.ts et saisir 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 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 task №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 connectées à nos composants. Cela sera fait dans le prochain chapitre !
Merci pour vos commentaires !
