Skip to content

Navigation et routage

La méthode la plus simple pour le routage est d'insérer les routes dans la constante routes du fichier app.routes.ts où chaque route simple est composée d'un chemin, d'un titre et du composant associé

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

export const routes: Routes = [
    {
        path: 'heros',
        component: HerosComponent,
        title: "Héros"
    },
    {
        path: 'chemin',
        component: Composant,
        title: 'Titre affiché par le navigateur'
    }
];

Pour ajouter un lien dans un page on utilisera [routerLink]

<a [routerLink]="['/heros']">Mes héros</a>

Pour activer une route à l'aide d'un bouton, par exemple, utiliser la méthode navigate de Router

import { Router } from '@angular/router';
...
public class MyComponent() {
    router = inject(Router)

    naviguerVersHeros() {
        this.router.navigate(["/heros"])
    }
}

Passer des paramètres

Dans le fichier app.routes.ts on peut définir des routes avec un ou plusieurs paramètres. Chaque paramètre sera précédé de /:

{
    path: 'heros/:id',
    component: HerosComponent,
    title: "Héros"

},

Si on veut créer un lien dans une autre page en passant des paramètres, les ajouter à la suite du chemin (path).

<a [routerLink]="['/heros', heros.id]">Mes héros</a>

Utiliser le même principe avec la méthode navigate de Router

router = inject(Router)
...
this.router.navigate(['/heros', heros.id]);

Pour accéder aux paramètres dans le composant injecter dans le composant ActivatedRoute et utiliser snapshot pour lire les paramètres une seule fois ou paramMap directement sinon (observable).

route = inject(ActivatedRoute);

// Pour lire le paramètre une fois
this.route.snapshot.paramMap.get('id');

// Si ce paramètre change sans quitter le composant
this.route.paramMap.subscribe(
    params => this.id = params.get('id');
);

Protection des routes

  • Les guard sont des fonctions qui définissent l'accès aux routes
  • On crée un guard avec la commande ng generate guard nom. Le fichier ainsi créé portera le nom nom-guard.ts

  • Angular nous proposes 4 types de guard

    • CanActivate : permet de gérer l'accès à la route
    • CanActivateChild : permet de gérer l'accès aux routes enfant
    • CanDeactivate : permet de quitter la route
    • CanMatch : permet de décider quelle route activer quand il y a plusieurs routes du même nom

  • On ajoute ensuite le guard dans le fichier app.routes.ts

import {CanActivateFn, Router} from '@angular/router';
import {inject} from '@angular/core';
import {AuthService} from '../services/auth-service';

export const adminGuard: CanActivateFn = (route, state) => {
    const authService: AuthService = inject(AuthService)
    const router: Router = inject(Router)

    // Si on a le rôle admin, on peut activer, le guard retourne vrai
    if(authService.getUtilisateur()?.role === 'admin') {
        return true;
    }

    // Si on ne peut pas activer, on redirige vers la page de connexion
    return router.createUrlTree(["/connexion"])
};

export const routes: Routes = [
    {
        path: 'admin',
        component: AdminComponent,
        title: 'Admin',
        canActivate: [adminGuard]
    },
]

Redirection vers une page d'erreur

Ajouter une route de remplacement. Si aucune route précédente n'est trouvée, celle-ci sera activée.

Ordre des routes

Attention à l'ordre des routes. Angular retournera la première route qui correspond à l'url.

{
    path: '**',
    component: NonTrouveComponent,
    title: Erreur
}

Régférences

Documentation Angular sur les routes
Documentation Angular sur les guards