Le Angular Router mappe les chemins URL aux composants, permettant la navigation dans une application monopages sans recharger la page complète. Vous définissez un tableau de configuration de routes reliant les chemins aux composants.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( m.) },
{ : , : },
];
<!-- the router renders the matched component here -->
<router-outlet></router-outlet>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a [routerLink]="['/users', user.id]">View {{ user.name }}</a> <!-- dynamic path -->
routerLink effectue une navigation côté client (sans rechargement), et routerLinkActive ajoute une classe CSS quand la route du lien est active — utile pour mettre en surbrillance la navigation.
import { Router } from "@angular/router";
export class LoginComponent {
constructor(private router: Router) {}
onLogin() {
this.router.navigate(["/dashboard"]); // navigate after an action
}
}
import { ActivatedRoute } from "@angular/router";
export class UserDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// read :id from the URL (params is an Observable, since it can change)
this.route.params.subscribe(p => this.userId = p["id"]);
// or snapshot for a one-time read:
const id = this.route.snapshot.paramMap.get("id");
}
}
Nested/child routes, route guards (auth), resolvers (pre-fetch data),
query params, and lazy loading of feature routes for code splitting.
Le Router est ce qui transforme Angular en une SPA multi-vues — navigation rapide côté client, interface pilotée par URL, et pages avec liens profonds.
Connaître la configuration des routes, <router-outlet>, routerLink par rapport au Router.navigate programmatique, et lire les paramètres via ActivatedRoute couvre les besoins quotidiens de routage de toute application Angular, avec les guards et le chargement paresseux construisant sur cette base.