Episode 10 : Rajouter une barre de navigation 🏁

Episode 10 : Dans l’épisode précédent, nous avons vu comment mettre en pratique l’architecture Smart & Dumb pour le composant de notre page d’accueil. Cependant, nous avons un problème. Nous voulons mettre en place une barre de navigation sur l’ensemble de nos pages, et pas seulement sur la page d’accueil. Comment mettre en place ce composant « cross-page » pour notre barre de navigation ?

Nous savons comment découper nos pages en composants, de manière cohérente, grâce à l’architecture « Smart & Dumb » que nous avons vu à l’épisode 8. Nous allons maintenant mettre en place le composant de la barre de navigation. Il faudra qu’elle soit disponible sur toutes les pages de notre application, et pas seulement sur la page d’accueil. C’est ce que nous allons voir dans ce dernier épisode. Et oui, déjà !

Notre page d’accueil rend plutôt bien, mais elle paraît encore un peu vide. Je vous propose donc d’habiller un peu cette page en ajoutant une barre de navigation comme celle-ci :

Nous allons faire en sorte d’ajouter cette barre de navigation sur l’ensemble de nos pages, et pas seulement sur la page d’accueil. Nous devons donc générer un nouveau composant dédié à la navigation :

ng generate component core/components/navbar
--module=core
--skipTests
--export=true
--inline-style

Hey mais attend ! Pourquoi on génère ce composant dans le CoreModule ? Pourquoi pas avec les autres composants de la page d’accueil ?

La réponse est simple. La barre de navigation n’est pas un composant propre à la page d’accueil, car il doit être disponible dans toute l’application. Donc il n’a rien à faire avec nos autres composants de la page d’accueil. Ensuite, se pose la question de savoir s’il faut l’ajouter dans le module Shared ou Core. En fait, le composant de la barre de navigation n’est pas réellement un élément qui est injecté et partagé à plusieurs endroits dans l’application. C’est un composant qui est injecté une seule fois, à la racine de l’application. Donc même si c’est un composant, nous allons l’ajouter dans le module Core.

Et cette option –export, quelle est son rôle ?

Cette option permet d’exporter le nouveau composant depuis le module où il est généré. Dans notre cas, le composant de la barre de navigation est exporté depuis le module Core, afin de pouvoir l’afficher sur toutes les pages de notre application. Cette option vous évite donc de devoir exporter le composant de barre de navigation vous-même, dans le module core.module.ts :

01 // Les importations
02
03 @NgModule({
04  // …
05  exports: [ NavbarComponent ]
06 })

Maintenant, notre composant est disponible dans l’ensemble de l’application, grâce à l’option export que nous avons passé à Angular CLI. Ensuite, remplacez le code généré par défaut dans le fichier navbar.component.html par ce code :

01 <nav class="navbar navbar-expand navbar-light bg-light">
02  <div class="container">
03   <a class="navbar-brand">Awesome List</a>
04   <div class="collapse navbar-collapse">
05    <ul class="navbar-nav mr-auto">
06     <li class="nav-item">
07      <a class="nav-link">Accueil</a>
08     </li>
09    </ul>
10    <ul class="navbar-nav ml-auto">
11     <li class="nav-item">
12      <a class="nav-link">Connexion</a>
13     </li>
14     <li class="nav-item">
15      <a class="nav-link">Inscription</a>
16     </li>
17    </ul>
18   </div>
19  </div>
20 </nav>

Il s’agit de simple code HTML, associé avec certaines classes de Bootstrap pour mettre en forme la barre de navigation. Il ne nous reste plus qu’à l’injecter sur toutes les pages de l’application, depuis le template racine app.component.html :

<al-navbar></al-navbar>
<router-outlet></router-outlet>

La barre de navigation apparait maintenant sur toutes les pages. Et le contenu spécifique aux différentes pages sur lesquelles l’utilisateur naviguera sera injecté dans la balise router-outlet. Vous savez désormais comment ajouter une barre de navigation sur l’ensemble de vos pages !

C’était le dernier épisode de cette série dédiée à la maîtrise d’Angular. On a terminé sur quelque chose de simple, mais qui en jette visuellement, histoire de terminer en beauté. Pour ceux qui étaient de passage sur ce blog, je vous souhaite une bonne continuation dans vos développements. Et pour les autres, je vous donne rapidement des nouvelles via la liste email à laquelle vous êtes abonnés. A très vite !

Bon apprentissage pour la suite,

Et bon développement,

Simon.

---