Qu’est-ce que le routage dans Angular ?

En Angular, le routage (ou Angular Routing) est un mécanisme qui permet de naviguer entre différentes vues ou pages sans rechargement complet de la page.
Il est au cœur du concept de Single Page Application (SPA).

Le router Angular associe des URLs à des composants spécifiques. Ainsi, selon l’adresse dans la barre du navigateur, Angular affiche le composant correspondant dans la page, sans recharger l’application.

Fonctionnement du routage Angular

Angular utilise @angular/router pour gérer les routes.
Chaque itinéraire (route) est un objet avec au minimum :

  • path : l’URL à écouter
  • component : le composant à afficher

Exemple basique :

{ path: 'login', component: LoginComponent }

➡ Quand l’URL contient /login, Angular affiche LoginComponent.

L’affichage se fait dans la balise spéciale :

<router-outlet></router-outlet>

C’est l’emplacement dynamique où Angular injecte les composants liés aux routes.

Fonctionnalités avancées

  • Paramètres dynamiques (path: 'books/:id') pour afficher des données selon l’ID.
  • Routes imbriquées (child routes).
  • Lazy loading (chargement à la demande de modules).
  • Guards pour contrôler l’accès.
  • Resolvers pour précharger les données.
  • Gestion des routes 404 via un wildcard (**).

Avantages du routage Angular

  • Navigation fluide : aucun rechargement complet.
  • Organisation claire : séparation nette entre les différentes vues.
  • Performance améliorée grâce au lazy loading.
  • Gestion d’erreurs avec redirection vers des pages spécifiques (ex. 404).

Angular Guards : sécurité et contrôle d’accès

Les Guards Angular sont des fonctions de contrôle d’accès exécutées avant l’activation d’une route.

Types de Guards

  • CanActivate : Autorise ou refuse l’accès à une route.
  • CanDeactivate : Bloque la sortie si certaines conditions ne sont pas remplies (ex : formulaire non sauvegardé).
  • CanActivateChild : Applique des restrictions aux routes enfants.
  • CanLoad : Empêche le chargement lazy d’un module si les conditions ne sont pas réunies.

Utilités

  • Sécurité (authentification / autorisation)
  • Empêcher l’accès à certaines pages
  • Éviter les pertes de données non sauvegardées

Angular Resolvers : préchargement des données

Les Resolvers permettent de charger les données nécessaires à une route avant l’affichage du composant.

Fonctionnement

  1. L’utilisateur tente d’accéder à une route.
  2. Le resolver intercepte la navigation.
  3. Les données sont récupérées (ex : via une API).
  4. La route ne s’active qu’une fois les données prêtes.
  5. Le composant est affiché avec contenu directement disponible.

Avantages

  • Pas de pages vides ou “en chargement” à l’ouverture.
  • Expérience utilisateur améliorée (sans flickering).
  • Gestion centralisée des erreurs en cas d’échec du chargement.

Combiner Guards et Resolvers

  • Guards → Contrôlent l’accès (sécurité, règles métier)
  • Resolvers → Garantissent que les données sont là avant affichage

Bénéfices combinés :

  • Navigation sécurisée
  • Données prêtes immédiatement
  • Code plus propre et facile à maintenir grâce à la séparation des responsabilités

📚 Exemple simplifié

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    resolve: { stats: StatsResolver }
  }
];
  • AuthGuard vérifie si l’utilisateur est autorisé.
  • StatsResolver précharge les statistiques pour le tableau de bord.

En résumé

  • Routage Angular = gestion fluide des vues dans une SPA sans rechargement.
  • Guards = sécurité et contrôle de la navigation.
  • Resolvers = données prêtes avant affichage.

Ensemble, ils améliorent la sécurité, les performances et l’expérience utilisateur.

“Ces notes techniques sont à but informatif, non formatif, et reflètent mon expérience à la date de rédaction.”