L’un des rôles d’une application Web est de pouvoir servir des pages HTML au travers de liens HyperText. La balise responsable de ce routage est . Lorsque l’on clique sur un lien HyperText, le navigateur intercepte cette action et va charger la nouvelle page. Il en résulte la perte de tout contexte Javascript et un manque de fluidité de l’application : Comme ce site ! 🙂
Dans un framework front-end résolument Javascript comme Angular, il n’est pas souhaitable de perdre tout son contexte à chaque changement de page. Angular a donc besoin d’un système de routage pour permettre la navigation à travers différentes pages de votre application. Pour réaliser ce routage, Angular propose le module RouterModule disponible dans la librairie @angular/router.
Comme souvent, nous allons créer un nouveau projet à l’aide d’Angular-Cli pour illustrer nos propos. Appelons notre projet mon-projet-routage, et lançons la ligne de commande de création d’un nouveau projet :
Et là, c’est le dramehttps://web.archive.org/web/20211031105438/https://www.learn-angular.fr/le-routage-avec-angular/%E2%80%A6 Sur la version beta-16, nous avions un module déjà tout prêt pour faire du routage, mais avec la beta-19 il n’est plus disponible. Enfin, il est maintenant en option via le paramètre –routing :
Angular-CLI nous propose le module applicatif AppRoutingModule permettant d’ajouter la fonctionnalité de routage à notre application :
Ce module importe deux éléments notables de la librairie @angular/router : Routes et RouterModule.
Routes est un Array contenant la déclaration des Route et RouterModule est un module regroupant les directives et les services paramétrables permettant de remplir la fonctionnalité de routage. Comme cela a déjà été évoqué dans l’article sur les modules, on retrouve la méthode statique forRoot() qui prend en paramètre un tableau de Route et éventuellement une configuration via l’objet ExtraOptions. Nous sommes donc face à un module permettant d’apporter les services et directives à notre application via l’import de ce dernier au niveau du module root AppModule.
Déclaration d’une route dans un template
Si l’on reprend les bases d’une application SPA, lorsque l’utilisateur clique sur un lien, une fonction Javascript est lancée avec le path en paramètre. Cette fonction va se charger de récupérer la page liée à ce path à l’aide d’une table de routage et va afficher le contenu de cette dernière dans une
Nous allons créer un menu avec deux liens afin de comprendre comment paramétrer le router Angular.
Pour simplifier les choses, le menu sera déclaré directement dans le template du component principal AppComponent. Mais, il serait sans doute plus judicieux de le mettre dans un autre component.
Contrairement à une application Web classique, il n’est pas possible d’utiliser l’attribut href dans vos balises lien . Comme nous l’avons vu, cela entraîne un rechargement de la page et une perte de notre contexte Javascript. Angular nous fournit donc une directive en remplacement : routerLink. Cette directive attendant un tableau contenant un path et des paramètres optionnels (query paramaters, fragment, https://web.archive.org/web/20211031105438/https://www.learn-angular.fr/le-routage-avec-angular/%E2%80%A6).
Une fois nos liens déclarés, il est nécessaire d’indiquer à Angular où sera chargé le contenu du lien (la fameuse
Il nous reste maintenant à définir la table de routage au niveau du module AppRoutingModule que nous a généré Angular-CLI. Pour cela, nous allons lister dans le tableau de type Routes de notre module, les Route de notre application. Une Route est, à minima, l’association d’un path (partie d’une URL) et d’un Component et c’est ce Component qui sera integré dans la balise
Et voici notre module maintenant correctement configuré.
Vous pouvez lancer votre serveur avec un ng serve, tester vos deux liens et contempler le résultat.
La suite de cet article est disponible dans le livre Learn-Angular – Maîtriser les concepts du framework Angular pour développer des applications robustes.
Quelques sujets abordés dans l’article complet :
- Le cycle de vie d’un routage
- Gérer les redirections
- Utilisation des Guards
- La notions d’etat de router
- Créer des resolvers
- Gerer les Query Params, les segments
- Gérer les outlets
- Faire de la navigation programmatique ou à l’aide de directives