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.