Définir une route

Maintenant que vous avez configuré l'application pour utiliser le router d'Angular, vous devez définir les routes.

Dans cette activité, vous allez apprendre à ajouter et à configurer des routes dans votre application.

1. Définir une route dans app.routes.ts

   Votre application comporte deux pages à afficher : (1) la page d'accueil (Home) et (2) la page utilisateur (User).

   Pour définir une route, ajoutez au tableau routes de app.routes.ts un objet route qui contient :

   • Le path de la route (qui part automatiquement du chemin racine, c'est-à-dire /)
   • Le component que la route doit afficher

   import {Routes} from '@angular/router';
   import {Home} from './home/home';
   
   export const routes: Routes = [
     {
       path: '',
       component: Home,
     },
   ];

   Le code ci-dessus montre comment ajouter Home en tant que route. Implémentez maintenant cette route, ainsi que celle de User, dans le Playground.

   Utilisez 'user' comme chemin de User.

2. Ajouter un titre à la définition de route

   En plus de vous permettre de définir les routes, le router d'Angular vous permet aussi de définir le titre de la page à chaque navigation de l'utilisateur, en ajoutant la propriété title à chaque route.

   Dans app.routes.ts, ajoutez la propriété title à la route par défaut (path: '') et à la route user. Voici un exemple :

   import {Routes} from '@angular/router';
   import {Home} from './home/home';
   
   export const routes: Routes = [
     {
       path: '',
       title: 'App Home Page',
       component: Home,
     },
   ];

Dans cette activité, vous avez appris à définir et à configurer des routes dans votre application Angular. Beau travail. 🙌

Vous avez presque terminé de mettre en place le routing dans votre application, continuez.