Le routage avec Angular

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 <a href="…">. 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.

 

Notre premier routage

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 :

capture-decran-2016-11-11-a-11-48-15

Et là, c'est le drame… 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 : 

 

capture-decran-2016-11-11-a-12-05-08

 

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 <div> spécifiée dans la page html (typiquement index.html). Si vous avez compris cela, ce qui suit ne doit pas vous étonner. 

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 <a>. 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, …). 

 

Une fois nos liens déclarés, il est nécessaire d'indiquer à Angular où sera chargé le contenu du lien (la fameuse <div>). Cela se fait simplement à l'aide de la directive <router-outlet> qui va accueillir le contenu de la route. Cela nous donne ainsi le template suivant :

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 <router-outlet>. Nos Route se résument donc pour le moment à deux propriétés : le path et le component associé. Rapidement, nous allons créer nos deux Components AccueilComponent et Page1Component à l'aide de notre client Angular-CLI. 

 

capture-decran-2016-11-12-a-16-28-56

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.

 

router_end

 

 

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.

 

Le livre est disponible sur 

 

 

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

 

 

William Koza

William Koza

Consultant Indépendant  
Passionné par la conception et le développement logiciel, j’ai rapidement pris le rôle de Technical Leader lors de mes premiers projets. Ces expériences ont ainsi pu me faire accéder à des rôles d’architecte dans des projets d’envergure. Aujourd'hui, j'exerce mon métier en tant qu'indépendant, et toujours avec la même passion.
William Koza

Les derniers articles par William Koza (tout voir)