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 :

import { 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 :

export 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.

Configurez le routage dans le fichier app.routes.ts.