Angular : Routage

À quoi sert le routage ?

Le routage au sein d’une application Angular revêt un rôle central en simplifiant la navigation des utilisateurs au sein de l’application. Il permet d’établir une structure logique en associant des URL spécifiques à des vues ou à des composants particuliers, et offre ainsi une navigation plus intuitive. Nous pouvons aisément accéder aux diverses sections de l’application en utilisant des liens ou en entrant directement des URL dans la barre d’adresse de leur navigateur. Le mécanisme de routage assure une gestion transparente de l’historique de navigation de l’application. Les utilisateurs ont la possibilité de revenir en arrière ou d’avancer dans l’historique grâce aux boutons Précédent et Suivant de leur navigateur, ce qui contribue à une expérience utilisateur cohérente et prédictible.

L’un des points forts du routage est sa capacité à transférer des paramètres via les URL. Par exemple, il est envisageable de faire passer un identifiant d’utilisateur dans l’URL afin d’afficher le profil spécifique de ce dernier. Cette personnalisation du contenu en fonction des paramètres d’URL améliore l’interaction utilisateur et la pertinence du contenu affiché. Le routage peut...

La différence entre routage Node.js et routage Angular

Le terme « routage » peut avoir des significations légèrement différentes en fonction du contexte dans lequel il est utilisé. Le routage Node.js et le routage Angular se réfèrent à des concepts différents, bien que liés à la gestion des chemins ou des itinéraires dans une application web.

Dans Node.js, le routage fait référence à la gestion des requêtes HTTP entrantes et à la manière de les diriger vers des gestionnaires de requêtes spécifiques en fonction de l’URL demandée. Le routage dans Node.js est principalement utilisé pour créer des applications serveur, telles que des serveurs web ou des API REST. Il permet de définir des routes HTTP qui correspondent à des chemins d’URL spécifiques et de déterminer comment ces routes sont traitées.

Express.js, la solution que nous utilisons dans cet ouvrage, permet d’offrir un système de routage robuste avec lequel il est possible de définir des itinéraires, de gérer les méthodes HTTP (GET, POST, etc.) et de gérer les paramètres d’URL.

Un exemple courant de routage Node.js consiste à définir des routes pour gérer les demandes GET et POST vers différentes...

La mise en place d’un routage

La mise en place d’un système de routage est l’une des étapes essentielles lors du développement d’une application web en Angular.

Imaginez une application web qui propose un tableau de bord, une page de profil utilisateur, une section de paramètres, et bien d’autres vues. Sans un système de routage, l’utilisateur serait contraint de naviguer à travers des URL complexes ou de recharger la page à chaque action. C’est là qu’intervient le routage Angular.

Avec Angular, vous pouvez configurer des itinéraires (routes) qui associent des URL spécifiques à des composants particuliers. Lorsque l’utilisateur clique sur un lien ou saisit une URL, Angular charge le composant associé et l’affiche dans la vue sans actualiser la page entière. Cette navigation en douceur offre une expérience utilisateur exceptionnelle.

Le routage favorise également la structuration modulaire de votre application. Vous pouvez créer des composants indépendants pour chaque vue, les rendre réutilisables et les organiser en fonction de vos besoins. Cela rend le code plus propre, maintenable et évolutif.

Le système de routage Angular permet également de gérer l’état de l’application. Vous pouvez conserver l’état des vues lors de la navigation, utiliser des paramètres d’URL pour transmettre des données entre les composants, et même implémenter des fonctionnalités de chargement paresseux (lazy loading) pour optimiser les performances.

Le routage est un élément clé pour offrir une expérience utilisateur exceptionnelle dans vos applications Angular. Ce chapitre explique comment maîtriser le routage Angular pour créer des applications web modernes et puissantes.

1. Le tag <base>

Le tag <base> en Angular est un élément HTML essentiel qui permet de définir la base de l’URL (c’est la partie fixe d’une adresse web qui fournit un point de départ commun pour toutes les URL relatives d’une page web donnée) pour la résolution des URL relatives. Il est généralement placé dans la section <head> du fichier HTML principal de l’application (index.html)....

Le lazy loading

Dans le monde du développement web moderne, l’optimisation est la clé pour offrir une expérience utilisateur fluide et réactive. Les utilisateurs s’attendent à ce que les applications se chargent rapidement, peu importe leur taille ou leur complexité. C’est là que le lazy loading entre en jeu. Imaginez une application web complexe avec de nombreuses fonctionnalités et pages. Si tout le code de l’application était chargé dès le départ, le chargement initial serait considérablement ralenti, ce qui pourrait frustrer les utilisateurs. De plus, cela pourrait consommer des ressources inutiles, car l’utilisateur n’interagit souvent qu’avec une partie limitée de l’application à un moment donné.

C’est là que le lazy loading devient précieux. Avec cette technique, les modules ou les fonctionnalités sont chargés de manière asynchrone lorsque l’utilisateur les demande explicitement, par exemple en naviguant vers une page spécifique ou en utilisant une fonctionnalité particulière. Cela signifie que l’application principale peut démarrer rapidement, et que les ressources sont allouées de manière efficace lorsque l’utilisateur explore l’application. En utilisant le lazy loading, les développeurs peuvent offrir une expérience utilisateur plus fluide, réduire le temps de chargement initial, économiser de la bande passante et des ressources, et améliorer la performance globale de l’application.

1. L’intérêt d’un lazy loading

L’intérêt du lazy loading est multiple. Il apporte des avantages significatifs en termes de performance, d’expérience utilisateur et de gestion des ressources :

Amélioration des performances initiales : lorsque vous utilisez le lazy loading, seuls les modules ou les fonctionnalités nécessaires sont chargés lors du chargement initial de l’application, qui s’en trouve considérablement accéléré. L’expérience utilisateur est améliorée...

Les route guards : la police du routage

Les route guards permettent de protéger certaines routes en vérifiant si l’utilisateur a les autorisations nécessaires pour y accéder. Ils peuvent être utilisés pour contrôler l’accès aux routes en fonction de divers critères tels que l’authentification de l’utilisateur, le rôle de l’utilisateur ou toute autre logique personnalisée.

Il existe plusieurs types de route guards fournis par Angular :

CanActivate : permet de déterminer si un utilisateur est autorisé à accéder à une route ou non. Il prend une fonction qui retourne une valeur booléenne ou une promesse de valeur booléenne.
CanActivateChild : fonctionne de la même manière que CanActivate, mais il est utilisé pour protéger les routes enfants des routes parentes.
CanDeactivate : permet de déterminer si l’utilisateur est autorisé à quitter une route. Il est généralement utilisé pour demander une confirmation à l’utilisateur avant de quitter une page non sauvegardée.
Resolve : permet de récupérer des données avant de naviguer vers une route. Il est généralement utilisé pour charger les données qui seront nécessaires à l’affichage de la page.

Pour utiliser les route guards, il suffit de les spécifier dans les propriétés des routes lors de la configuration du routage.

Par exemple :

const routes: Routes = [ 
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, 
];

Ici, AuthGuard est une classe personnalisée qui implémente l’interface CanActivate et qui vérifie si l’utilisateur a les autorisations nécessaires avant de permettre l’accès à la route.

Attention, depuis Angular 16, les routes guards sont obsolètes. Cependant, vous pouvez les rencontrer dans du code existant. Actuellement, elles sont remplacées par la méthode inject(). Pous plus de détails, consultez...

Conclusion

Ce chapitre traite des concepts et des fonctionnalités clés du routage Angular. Nous avons vu les différences entre le routage Node.js et le routage Angular, et la manière dont Angular gère le routage côté client.

L’utilisation du module @angular/router a été présentée comme la méthode standard pour configurer et gérer le routage dans les applications Angular. Nous avons décrit la directive <router-outlet>, qui joue un rôle essentiel dans l’affichage des composants associés aux routes, ainsi que les différentes stratégies de chargement, telles que le lazy loading et la preloading strategy, qui peuvent significativement influencer les performances d’une application.

Un aspect important que nous avons abordé est l’utilisation des route guards pour sécuriser et contrôler la navigation dans une application Angular. Ces guards ne sont plus utilisés depuis la version 16 d’Angular, ce qui peut impacter la manière dont les projets plus anciens sont gérés. Malgré cela, la compréhension des concepts liés aux route guards reste précieuse, car ils sont partie intégrante d’anciennes applications Angular.

Ce chapitre nous a permis de maîtriser l’art du routage Angular, un élément central d’Angular....