Angular
Angular Routing

Introduction au Routing

Le Routing permet de naviguer entre différentes pages sans recharger l'application, offrant ainsi l'expérience fluide et instantanée d'une SPA (Single Page Application).

Mise en place du Routing

1. Définition des routes app.routes.ts

C'est ici que l'on déclare la correspondance entre une URL et le composant à afficher.

// Importation du module Routes d'Angular
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  {
    path: '', // Chemin vide correspondant à la page d'accueil
    component: HomeComponent
  },
  {
    path: 'about', // L'URL /about affichera la page "À propos"
    component: AboutComponent
  }
];

2. Configuration du Router app.config.ts

Dans les applications Angular récentes, on déclare nos routes dans le fichier de configuration principal de l'application.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

3. Affichage dans le Template app.component.html

Utilisez routerLink pour créer des liens de navigation rapides, et <router-outlet> comme "point d'insertion" où s'afficheront les composants selon la route.

<!-- Menu de navigation -->
<nav>
  <a routerLink="/">Accueil</a>
  <a routerLink="/about">À propos</a>
</nav>

<!-- Point d'insertion pour le contenu dynamique -->
<router-outlet></router-outlet>