Routes avec Angular router

Angular fournit un routeur qui va nous permettre de définir ... des routes !

Configuration des routes

En général, les routes sont définies dans un fichier app.routes.ts à la racine de l'application :

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CardsComponent } from './cards/cards.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'cards', component: CardsComponent }
];

Importation des routes pour toute l'application

Le fichier app.config.ts va nous permettre d'importer les routes :

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

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

Importation des routes pour le composant app

Dans le fichier app.components.ts, il va falloir importer "RouterOutlet" qui est une directive permettant de spécifier où vont s'afficher les composants qui correspondent à des routes :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

import { MenuComponent } from './menu/menu.component';
import { RacesComponent } from './cards/cards.component';

@Component({
  selector: 'co-root',
  standalone: true,
  imports: [MenuComponent, CardsComponent, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Cards';
}

Utilisation de RouterOutlet dans le template du composant app

<router-outlet> va nous permettre de spécifier dans quelle partie du template devront s'afficher les composants qui correpondent à la route demandée.

<co-menu></co-menu>
<main class="container">
  <router-outlet></router-outlet>
</main>

Ajout de liens avec RouterLink

Pour utiliser un lien qui enverra sur une route, il vous faut :

importer RouterLink dans le component concerné (menu par exemple)

import { RouterLink } from '@angular/router';
...
@Component({
 ...
  imports: [RouterLink]
})

utiliser la directive routerLink dans vos liens :

<a class="nav-link" routerLink="/races">Races</a>

coopernet Réussir son site web et ses applications de la conception à la réalisation