Comment contrôler sa navigation sur Angular ?

Ce billet a pour but de vous apporter une solution, parmi d’autres, au cas particulier de la navigation sur plusieurs niveaux sur Angular.

Contexte

Dans le cadre de notre activité, sur Toulouse, de développement d’applications sur mesure, il nous a été confié un projet de Gestion Commerciale totalement personnalisée. Le besoin du client s’est révélé être par la suite, un cas complexe de navigation avec la possibilité d’avancer de pages en pages sur plusieurs niveaux. Ainsi que de revenir en arrière, au besoin, par l’intermédiaire de boutons dédiés.
Quoi qu’il en soit, le gros du problème fut de gérer le retour aux pages précédentes. D’une part, le client ne souhaitait pas un bouton retour du navigateur. D’autre part, Angular est un outil puissant, qui permet de créer des composants réutilisables. C’est pourquoi, il aurait été impensable de figer l’url de retour dans le code HTML via un bouton.

Réflexion

La première chose à laquelle nous avons pensé, fut d’abord d’utiliser location et en particulier sa fonction de retour location.back()

Commençons par examiner ce qu’il se passe avec cette méthode.
Comme l’illustre le schéma, le premier retour arrière se passe bien mais le second nous ramène à la page que nous venons juste de quitter. Il semble qu’il n’y ait pas de pile (d’historique) de navigation mais une simple sauvegarde de l’url d’origine.

Notre solution

Ainsi, après avoir tenté de google-iser une solution from Angular, nous avons décidé de créer notre propre historique de navigation. En effet, cette solution amène de nombreux avantages, dont le fait d’obtenir une maîtrise complète. Pour ce faire, nous avons donc créer notre propre service de navigation, HistoryNavigationService

Ce service permet de créer au fur et à mesure une pile d’historiques de navigation, que nous pourrons manipuler en fonction de notre besoin.
Nous pouvons ainsi stocker dans notre tableau d’historiques, historyNavigation, des objets implémentant l’interface IHistoryNavigation

A chaque fois que nous avancerons d’une page, nous allons ajouter un objet contenant l’url en cours et l’url précédente. Puis, dés lors que nous reculerons, par l’intermédiaire d’un bouton retour, nous allons retirer le dernier objet enregistré.
Afin d’éviter d’avoir une pile qui finisse par être trop lourde, dès lors que l’utilisateur cliquera sur un menu (oui car comme dans tout bonne application web nous avons un menu de navigation), l’historique est réinitialisé par l’intermédiaire de la fonction resetHistoryNavigation .
Dans le but d’automatiser la récupération de l’url courante, nous allons aller dans le composant App du projet et faire appel à notre service

Ainsi, lorsque l’utilisateur fera appel à une nouvelle url, celle-ci sera stockée dans notre historique de navigation.
De cette manière, quand l’utilisateur appuiera sur un bouton de type retour, l’appel à setHistoryNavigationBack supprimera la dernière entrée de notre historique.
Par ailleurs, en vue de palier au problème de la gestion de l’historique lors d’un rechargement de la page, nous avons utilisé le localstorage.
Pour terminer, voici le code complet :

HistoryNavigationService

LocalStorageService

Likez et suivez-nous sur les réseau sociaux !

Vous souhaitez développer une application en Haute-Garonne ?

Rencontrons-nous pour échanger sur votre projet

Découvrez nos pôles d'expertise...

... afin de vous offrir des prestations sur-mesure et de haute qualité au travers de nos compétences.

Expertise & Conseil

Cidsoft est là pour vous conseiller et aussi vous accompagner à chaque étape de votre projet. De l'expression de votre besoin à sa réalisation, et puis de sa mise en service à sa maintenance.