Configurer le routage dans Angular

Cette leçon présente le routage Angular, qui permet de naviguer entre les vues et de gérer les URL de votre application.

Qu’est-ce que le routage ?

Le routage vous aide à naviguer entre différents composants ou pages de votre application Angular en fonction de l’URL.

Configurer le module de routage

Créez un module de routage lors de la création de votre projet ou ultérieurement à l’aide d’Angular CLI :

ng generate module app-routing --flat --module=app

Définir les routes

Les routes sont définies sous forme d’un tableau de chemins associés à des composants :

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Point d’insertion du routeur

Utilisez <router-outlet></router-outlet> pour afficher dynamiquement les composants correspondants en fonction de la route.

<router-outlet></router-outlet>

Naviguer avec routerLink

Naviguez entre les vues à l’aide de la directive routerLink :

<a routerLink="/home">Home</a>

Naviguer par programmation

Vous pouvez également naviguer par programmation à l’aide du service de routage :

this.router.navigate(['/home']);

Routes génériques

Gérez les chemins non définis à l’aide de routes génériques afin d’afficher une page 404 personnalisée :

{ path: '**', component: PageNotFoundComponent }

Résumé

Vous comprenez maintenant les bases du routage et pouvez configurer efficacement les routes dans les applications Angular. Excellent travail !