Configuration du routage de base dans Angular

Configurons maintenant le routage. Faisons en sorte que si l'URL /aaaa/ est saisie dans la barre d'adresse du navigateur, le premier composant s'affiche, et si /bbbb/ est saisi, le deuxième s'affiche.

Cette configuration se fait dans le fichier app.routes.ts. Pour commencer, il faut importer nos composants :

app/app.routes.tsimport { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Et maintenant, il faut indiquer quelle URL correspond à quel composant. Pour cela, il faut créer un tableau spécial d'objets de marcheurs (routes). Dans chaque objet, il y aura une clé path, dans laquelle l'URL est définie (sans les barres obliques finales), et une clé component, dans laquelle le composant à afficher pour cette URL est défini :

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

La configuration du routage, cependant, n'est pas suffisante. Il faut indiquer dans le composant parent l'emplacement où nos composants seront affichés. Nous nous occuperons de cela dans la prochaine leçon.