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 :

La barre de navigation de notre application.

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.


Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boĂźte mail. En fait, cet article fait partie d’une sĂ©rie de 10 articles extraits de l’ouvrage MaĂźtriser Angular pour l’entreprise.ï»ż