Introduction au routing

Objectifs de ce chapitre

• ✔️
  Comprendre le routage avec Angular

  Découvrez comment fonctionne le routage dans Angular.

• ✔️
  Définir des routes

  Définissez des routes dans votre application.

Qu’est-ce que le routing ?

Le routing est le processus permettant de déterminer le contenu à afficher en fonction de l’URL du navigateur. Angular est un framework d’application monopage (SPA). En modifiant l’URL, l’application peut afficher un contenu différent sans recharger la page. Il fournit une API Router pour modifier le contenu en fonction de l’URL.

Le projet affiche actuellement une liste de tâches. Afin d’ajouter une nouvelle tâche à cette liste, vous avez besoin de pouvoir basculer la vue de cette liste à la vue du formulaire.

Directive router-outlet

Le module RouterModule fournit une directive appelé router-outlet. Cette directive est utilisée pour afficher le contenu de la route actuelle. Lorsque l’utilisateur navigue vers un itinéraire différent, le contenu du router-outlet est remplacé par le contenu du nouvel itinéraire. La directive router-outlet a pour seul rôle de marquer l’emplacement dans le Template HTML du contenu correspondant à l’URL que vous aurez défini.

🎓 Instructions

1. Modifiez le fichier src/app/app.component.html.

   <header>
       <h1>Angular Practical course</h1>
   </header>
   
   <main class="container pt-4">
   
       <router-outlet/>
   </main>

Dans le cas ci-dessus, le router-outlet est placé entre les balises <main>. Cela signifie donc que vous continuerez à avoir l’en-tête <header> sur toutes les pages et que le contenu paramétré changera en fonction de l’URL sur laquelle vous naviguerez.

Définir les routes

Pour afficher le contenu souhaité par rapport à l’URL, vous devez ajouter dans votre tableau routes un chemin path à chaqun de vos composants component:

{ path: '/add-task', component: TaskFormComponent }

Le chemin est donc l’URL vers laquelle l’utilisateur accédera. Par exemple, le chemin /add-task signifie que l’utilisateur naviguera vers l’URL http://localhost:4200/add-task.

Le composant fourni est le composant qui sera affiché dans l’espace réservé router-outlet lorsque l’utilisateur accède à cette URL.

La définition de la route réside dans le fichier app-routing.module.ts.

🎓 Instructions

1. Modifiez le fichier src/app/app-routing.module.ts.

   app-routing.module.ts

   import {NgModule} from '@angular/core';
   import {Routes, RouterModule} from '@angular/router';
   
   import {TaskListComponent} from './task-list/task-list.component';
   import {TaskFormComponent} from './task-form/task-form.component';
   
   const routes: Routes = [
   
     {path: '', component: TaskListComponent},
     {path: 'add-task', component: TaskFormComponent}
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule {}

Ajoutez des liens pour naviguer entre les routes

Il faut ajouter des liens pour déclencher la navigation entre les différents itinéraires. Vous pourriez modifier manuellement l’URL dans le navigateur, mais les utilisateurs s’attendent à disposer de liens cliquables pour naviguer entre les pages.

La balise HTML <a> est utilisée pour créer des liens et est associée la directive routerLink pour utliser le routing d’Angular. Cette directive prend le chemin de la route vers laquelle naviguer en tant que valeur.

🎓 Instructions

1. Modifiez le fichier src/app/app.component.html.

   app.component.html

   <header>
       <h1 class="navbar-brand fw-bold">Angular Practical course</h1>
   
       <a class="btn btn-light" routerLink="/">Liste des tâches</a>
       <a class="btn btn-light" routerLink="/add-task">Ajouter une nouvelle tâche</a>
   </header>
   
   <main class="container pt-4">
       <router-outlet />
   </main>

2. Cliquez sur les deux liens pour voir le contenu de TaskListComponent et TaskFormComponent s’afficher à tour de rôle à l’emplacement défini par le router-outlet.

Astuce

Le chemin du composant TaskFormComponent est défini à add-task dans le fichier app-routing.module.ts. Par contre, dans le Template HTML, dans la directive routerLink, il est spécifié comme /add-task (avec le /).

routerLink construit l’URL de manière relative au chemin courant. Ajoutez un slash indique que l’URL doit être construite depuis l’URL de base de l’application (ici http://localhost:4200). Sans la spécification du slash dans la directive du routerLink, vous réaliseriez des imbrications et vous navigueriez vers /add-task/add-task.

<a routerLink="/add-task">...</a> => http://localhost:4200/add-task`…` => http://localhost:4200/add-task/add-task

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à ajouter du routage à votre application. Vous avez appris à définir les routes et à naviguer entre elles à l’aide de la directive routerLink. Vous avez également appris à afficher le contenu de la route actuelle à l’aide de la directive router-outlet.