Créer un simple routeur

Dans le module, nous définissons les chemins pour les composants dans app.routes.ts :

import { RouterModule, Routes } from '@angular/router';

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

export const routes: Routes = [
  { path: '', component: MainComponent },
  { path: 'other', component: OtherComponent }
];

On admet que nous avons 2 composants : MainComponent et OtherComponent. Nous créons donc un tableau définissant les différentes routes.

Chargeons le provider du routeur

Dans le fichier app.config.ts, nous chargeons le provider du routeur :

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

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

provideRouter prend en paramètre le tableau des routes définies précédemment. Il permet de charger le routeur dans l'application.

Utiliser les directives pour naviguer

Le composant utilise des directives pour naviguer avec le routeur :

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <ul>
      <li><a routerLink="/">main</a></li>
      <li><a routerLink="/other">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

La directive routerLink indique le chemin du composant et la directive router-outlet permet de charger le composant correspondant.