TP 8.0 : Routing

Objectifs

• Implémenter un routeur dans l’application

Instructions

Étape 1 : Créer de nouveaux composants et les mapper à des routes

• Créez les composants suivants :

• HomeComponent

• PageNotFoundComponent

• AlbumAddComponent

• Créez une route pour chaque composant dans le fichier app.module.ts et importez RouterModule

• Les routes devraient ressembler à ceci:

Chemin	Composant
‘’	rediriger vers /home
‘home’	HomeComponent
‘album/list’	AlbumListComponent
‘album/add’	AlbumAddComponent
‘**’	PageNotFound

• Maintenant que vos routes sont définies, vous souhaitez injecter les composants routés à la place de <router-outlet>.
• AlbumAddComponent affichera seulement un message pour le moment (Vous n’avez rien à faire dans ce composant pour l’instant).
• Dans votre fichier app.component.html, retirez les balises album-list et album-of-the-day et remplacez-les par <router-outlet> pour indiquer à Angular où afficher les composants routés.
• Dans votre fichier home.component.html, ajoutez la balise <album-of-the-day>.
  • Normalement, le composant a de la logique associée dans le fichier app-component concernant la possibilité de masquer le composant album-of-the-day. Pour ce lab, nous le garderons comme tel et mettrons de côté cette fonctionnalité pour l’instant.
• Votre fichier app.module.ts contient la variable routes qui devrait ressembler à quelque chose comme :

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'album/add', component: AlbumAddComponent},
  {path: 'album/list', component: AlbumsListComponent},
  {path: '**', component: PageNotFoundComponent}
]

[CONSEIL] N’oubliez pas d’importer RouterModule. La méthode forRoot de RouterModule doit être appelée avec le routes comme paramètre.

• Votre fichier app.component.html devrait ressembler à quelque chose comme cela:

<div>
  <app-header [title]="title"/>
  <main>
    <p>
      Welcome to {{title}}!
      In this app you can manage your music collection
    </p>
    <router-outlet></router-outlet>
  </main>
  <app-footer [title]="title"/>
</div>

À ce niveau.

• localhost:4200 devrait rediriger vers /home et afficher le HomeComponent.
• localhost:4200/album/add devrait afficher AlbumAddComponent.
• localhost:4200/album/list devrait afficher AlbumListComponent.

Étape 2 : Ajouter des liens pour naviguer entre les routes

• Dans le fichier MenuComponent, modifiez les deux liens pour que nous puissions naviguer vers le AlbumsListComponent et le AlbumAddComponent.
• Dans le fichier HeaderComponent, nous voulons également aller /home lors d’un clique sur le titre.