Episode 5 : L’architecture modulaire que nous avons mis en place prĂ©cĂ©demment est prĂȘte Ă  encaisser nos futurs dĂ©veloppement. Il nous reste encore un peu de socle Ă  mettre en place, avant de se lancer dans les dĂ©veloppements plus tard. Il faut ajouter un peu de style dans notre application. Mais quelle librairie choisir, et comment l’intĂ©grer dans notre projet gĂ©nĂ©rĂ© avec Angular CLI ?

Nous avons dĂ©jĂ  ajoutĂ© la structure modulaire de notre application qui est en place. Maintenant, il nous reste encore Ă  intĂ©grer un certains nombre d’Ă©lĂ©ments indispensable dans toute application, Ă  savoir le style. Nous allons voir comment choisir et intĂ©grer une librairie de design dans notre application.

Le style de notre application 

Pour que notre application soit un minimum prĂ©sentable Ă  nos utilisateurs, il est souvent nĂ©cessaire d’ajouter un nombre important de rĂšgles de style CSS . Cependant, la mise en place du design ne concerne pas directement Angular, et beaucoup de site web ont des Ă©lĂ©ments de design en commun (mise en place d’une barre de navigation, centrer les Ă©lĂ©ments de la page, etc). Pour ces deux raisons, nous allons utiliser une librairie tierce pour implĂ©menter le design de notre application. Heureusement, il en existe un grand nombre, et le plus dur sera de faire un choix entre toutes ces librairies. Nous allons retenir les librairies les plus connues, que vous connaissez dĂ©jĂ  peut-ĂȘtre :

  • La librairie Bootstrap : C’est la librairie prĂ©fĂ©rĂ©e des dĂ©veloppeurs pour implĂ©menter le design d’un site web. Bootstrap a Ă©tĂ© initialement dĂ©veloppĂ© par Twitter, et est rapidement devenue la librairie la plus populaire dans son domaine. 
  • La librairie Angular Material : Cette librairie permet d’implĂ©menter le Material Design, qui est un ensemble de rĂšgles de design proposĂ©es par Google. L’utilisation du Material Design implique que votre application ressemblera beaucoup aux interfaces Ă©purĂ©es et minimalistes de Google. De plus, le systĂšme est assez fermĂ©, et vous aurez du mal Ă  vous en dĂ©faire si vous souhaitez changer de design par la suite. 
  • La librairie Materialize : Il s’agit d’une petite librairie dĂ©veloppĂ©e Ă  partir du Material Design, mais qui est un peu plus haut niveau. Il y a moins d’options Ă  personnaliser, et souvent il suffit d’ajouter quelques classes sur nos balises HTML pour obtenir le rĂ©sultat voulu. Je vous prĂ©sente cette librairie pour que vous puissiez faire la diffĂ©rence entre le Material Design et Materialize, mais cette librairie n’est pas en concurrence directe avec les deux prĂ©cĂ©dentes, car il s’agit d’un projet de plus petite taille. 

Bien sĂ»r, il en existe beaucoup d’autres, et on pourrait Ă©crire un cours entier Ă  ce sujet. Cependant, nous devons bien en choisir une. Je prĂ©fĂšre que l’on parte sur la solution la plus populaire, qui est Bootstrap : 

 L’avantage de partir sur la solution la plus populaire, c’est qu’il y a une communautĂ© importante derriĂšre cette librairie. On trouvera donc toujours une aide sur Internet en cas de problĂšme, et on apprend Ă  utiliser un outil qui n’aura pas disparu dans 6 mois.  

Cependant, comme Google voudra certainement uniformiser l’interface du projet Awesome List avec ses autres applications destinĂ©es au grand public, on pourrait ajouter une petite touche de Material Design pour leur faire plaisir, non ? Heureusement, comme Bootstrap est un projet trĂšs populaire, de nombreux thĂšmes ont Ă©tĂ© dĂ©veloppĂ©s pour Ă©tendre la version standard de Bootstrap. Le site Bootswatch.com offre des thĂšmes d’excellente qualitĂ© pour personnaliser votre version de Boostrap. 

En cherchant bien sur leur site, vous trouverez un thĂšme appelĂ© Materia. Il s’agit d’un thĂšme Bootstrap imitant le Material Design. Ainsi, nous profitons de la popularitĂ© de Bootstrap, et on respecte la charte graphique de Google. Parfait !  

Vous pouvez trĂšs bien essayer d’autres thĂšmes par curiositĂ©. Comme beaucoup de sites utilisent la version standard de Boostrap, les thĂšmes proposĂ©s sur Bootswatch vous permettent de vous diffĂ©rencier de ces sites Ă  peu de frais.

Implémenter le style CSS

L’intĂ©gration de Bootstrap dans un projet Angular n’est pas trĂšs compliquĂ©e, mais il faut bien sĂ©parer deux aspects diffĂ©rents : 

  1. IntĂ©grer la partie visuelle : Il s’agit du code CSS statique qui gĂšre l’apparence des Ă©lĂ©ments de notre page, c’est-Ă -dire la partie purement visuelle du site. C’est lĂ  que nous utiliserons le thĂšme Materia de Bootswatch. 
  1. IntĂ©grer la partie dynamique de Bootstrap : Bootstrap fournit Ă©galement plusieurs Ă©lĂ©ments utilisant du code JavaScript, comme les boĂźtes modales ou les menus dĂ©roulants par exemple. Nous utiliserons donc une librairie pour faire le lien entre Bootstrap et Angular. 

De plus, nous verrons comment ajouter des icĂŽnes dans notre application, car nous en aurons besoin pour ajouter des indicateurs visuels pour l’utilisateur. 

En avant, c’est parti ! 

IntĂ©grer un thĂšme de Bootswatch 

IntĂ©grer un thĂšme de Bootswatch dans votre application n’est pas trĂšs compliquĂ© si vous avez deux choses en tĂȘte : Bootswatch se base sur Bootstrap, il faut donc que nous rĂ©cupĂ©rions ces deux librairies, et nous devons Ă©galement connaitre le nom du thĂšme Ă  appliquer dans notre application, qui est Materia

Commençons donc par rĂ©cupĂ©rer les dĂ©pendances dont nous aurons besoin :  

npm install bootstrap@~4.2.1 --save
npm install bootswatch@~4.2.1 --save

Ensuite, il nous suffit d’importer les Ă©lĂ©ments de style nĂ©cessaires dans notre fichier global de dĂ©finition des styles style.scss :

01 @import "../node_modules/bootswatch/dist/materia/variables";
02 @import "../node_modules/bootstrap/scss/bootstrap.scss";
03 @import "../node_modules/bootswatch/dist/materia/bootswatch";   

Il y a deux points importants dans ce code. Le premier est que l’ordre de dĂ©claration des lignes ci-dessus a une importance, car il y a un ordre de dĂ©pendance entre elles. Il faut juste que vous le sachiez. Le deuxiĂšme point est que vous pouvez facilement changer le thĂšme Bootswatch de votre application, en remplaçant le nom du thĂšme que j’ai mis en gras ci-dessus. 

Par exemple, remplacer materia par lumen aux lignes 1 et 3, pour appliquer le thĂšme Lumen dans votre application. Pour rappel, la liste des thĂšmes disponibles est accessible sur le site de Bootswatch.

Si vous retournez sur la page de votre application Ă  l’adresse localhost:4200, vous devriez voir un lĂ©ger changement de style sur la page, car notre thĂšme a Ă©tĂ© pris en compte.  Si rien ne s’affiche, n’oubliez pas de relancer la commande ng serve –o dans votre terminal. 

IntĂ©grer la partie dynamique JavaScript de Boostrap 

Nous venons d’intĂ©grer notre thĂšme, mais Bootstrap propose aussi d’ajouter d’autres Ă©lĂ©ments dynamiques qui vont nous servir dans notre application de productivitĂ©. Cependant ces Ă©lĂ©ments nĂ©cessitent du code JavaScript que nous n’avons pas encore intĂ©grĂ©.

Pour faire le lien entre le JavaScript de Bootstrap, et le TypeScript et les modules d’Angular, nous allons utiliser une librairie. Il existe deux librairies qui permettent de faire cela, et qui ont presque le mĂȘme nom : Ng-bootstrap et Ngx-bootstrap.

Si vous allez sur le site web de ces deux librairies, vous verrez qu’elles se ressemblent Ă©trangement. 

Quelles diffĂ©rences entre ces deux librairies alors ? 

Ces deux librairies correspondent bien Ă  deux projets diffĂ©rents, maintenus par deux Ă©quipes diffĂ©rentes, qui essayent de faire la mĂȘme chose : utiliser les composants JavaScript de Bootstrap dans un projet Angular. 

Les deux projets mettent à disposition les éléments dynamiques de Bootstrap sous forme de composants pour votre application Angular. La principale différence concerne les versions de Bootstrap supportées :

  • La librairie ngx-bootstrap supporte les versions 3 et 4 de Bootstrap.  
  • La librairie ng-bootstrap supporte Bootstrap 4 seulement, et requiert au minimum la version 5 d’Angular (pas de problĂšme pour nous de ce cĂŽtĂ©-lĂ ). 

Pour ĂȘtre plus clair, si vous utilisez Bootstrap 3, la seule option viable est la librairie ngx-bootstrap. A partir de la version 4 de Bootstrap, vous avez le choix entre les deux projets. 

Mais comme ngx-bootstrap est un projet plus ancien, il est plus mature et stable que ng-bootstrap. C’est pourquoi nous allons partir sur ngx-bootstrap, tout simplement. 

Et comment est-ce que j’intĂšgre ngxbootstrap ? 

L’installation de cette librairie peut ĂȘtre couplĂ©e avec l’utilisation d’Angular CLI, et plus particuliĂšrement avec la commande ng add. C’est une commande que je ne vous ai pas encore prĂ©sentĂ©, qui permet d’intĂ©grer plus facilement des libraires tierces au sein de votre application Angular. Nous allons donc pouvoir en une seule commande : installer les dĂ©pendances dans notre projet, dĂ©clarer les feuilles de styles nĂ©cessaires dans angular.json, et mettre Ă  jour notre fichier package.json avec notre nouvelle dĂ©pendance. 

Lorsque vous effectuez des modifications dans le fichier de configuration angular.json, il est nĂ©cessaire de redĂ©marrer votre application avec la commande ng serve –o pour que Angular prenne en compte ces changements.

Et en plus, grĂące Ă  ngx-bootstrap, nous pouvons choisir d’installer seulement les paquets que nous allons utiliser. Nous allons installer seulement les cinq modules dont nous allons avoir besoin pour Awesome List 

ng add ngx-bootstrap@~3.1.4 --component alerts
ng add ngx-bootstrap@~3.1.4 --component datepicker
ng add ngx-bootstrap@~3.1.4 --component dropdowns
ng add ngx-bootstrap@~3.1.4 --component modals
ng add ngx-bootstrap@~3.1.4 --component popover

Ces paquets que nous venons d’installer exportent plusieurs composants et directives. Ces Ă©lĂ©ments devront ĂȘtre importĂ©s dans nos composants Ă  chaque fois que nous en aurons besoin. Je vous propose donc de factoriser ces futures importations dans notre propre module NgxBootstrap. Nous passerons ensuite ce module au SharedModule, que nous avons dĂ©jĂ  importĂ© dans la plupart des modules de notre application. Ainsi nous importons les Ă©lĂ©ments de cette librairie une seule fois, et Ă  un seul endroit. 

ExĂ©cutez donc la commande suivante, afin de gĂ©nĂ©rer notre propre module dĂ©diĂ© aux importations de la librairie ngx-bootstrap : 

ng generate module shared/modules/ngx-bootstrap --module=shared --flat 

Cette commande d’Angular CLI permet de gĂ©nĂ©rer un nouveau module nommĂ© ngx-bootstrap.module.ts, dans le dossier shared/modules : 

L’option flat que j’ai ajoutĂ©e Ă  la fin de la commande permet d’éviter de gĂ©nĂ©rer un dossier ngx-bootstrap contenant uniquement notre module. Cela nous Ă©vite d’avoir une arborescence trop importante de dossiers dans notre projet, et de ne plus retrouver nos fichiers au final. 

Ensuite, ajoutez le code suivant dans le fichier ngx-bootstrap.module.ts : 

01 import { NgModule } from '@angular/core'; 
02 import { CommonModule } from '@angular/common'; 
03 // Ajouter ces importations : 
04 import { AlertModule } from 'ngx-bootstrap/alert';
05 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
06 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 
07 import { ModalModule } from 'ngx-bootstrap/modal';  
08 import { PopoverModule } from 'ngx-bootstrap/popover'; 
09  
10 @NgModule({ 
11   declarations: [], 
12   // Compléter le tableau des importations : 
13   imports: [ 
14     CommonModule, 
15     AlertModule.forRoot(), 
16     BsDatepickerModule.forRoot(), 
17     BsDropdownModule.forRoot(), 
18     ModalModule.forRoot(), 
19     PopoverModule.forRoot() 
20   ], 
21   // Compléter également le tableau des exportations : 
22   exports: [ 
23     AlertModule, 
24     BsDatepickerModule, 
25     BsDropdownModule,  
27     ModalModule, 
28     PopoverModule 
29   ] 
30 }) 
31 export class NgxBootstrapModule { } 

Nous avons importĂ© une sĂ©rie de modules fournis par la librairie NgxBootstrap au mĂȘme endroit, et nous les rĂ©exportons ensuite. Chacun des modules importĂ©s aura un rĂŽle dĂ©diĂ© au sein de notre application :

  • AlertModule : Il permet d’afficher des messages de confirmation, d’avertissement ou d’erreur Ă  l’utilisateur, en fonction de ses interactions avec l’application. 
  • BsDatepickerModule : Il permet Ă  l’utilisateur de sĂ©lectionner facilement une date au sein d’un petit calendrier. Il est possible de personnaliser plusieurs Ă©lĂ©ments, comme le format de la date, ou la plage de dates sĂ©lectionnables. 
  • BsDropdownModule : Il permet d’implĂ©menter rapidement des menus dĂ©roulants. 
  • ModalModule : Ce module s’occupe de gĂ©rer des boĂźtes modales dans votre application. Nous en utiliserons pour afficher le dĂ©compte d’un pomodoro. 
    PopoverModule : Il permet d’afficher une petite bulle superposĂ©e sur la page, comme ceux trouvĂ©s dans les bandes dessinĂ©es. On peut donc afficher des informations de seconde importance sans saturer la page principale. 

Tous ces modules sont donc disponibles dans le SharedModule, mais pas ailleurs dans notre projet, car le SharedModule ne les rĂ©exporte pas dans l’ensemble de l’application !

Ouvrez donc le fichier shared.module.ts, et rĂ©exporter notre module NgxBootstrapModule pour le reste de notre application : 

01 @NgModule({ 
02   declarations: [], 
03   imports: [ 
 ], 
04   exports: [ 
05     CommonModule, 
06     NgxBootstrapModule // Ajoutez l’exportation de NgxBootstrap 
07   ] 
08 }) 
09 export class SharedModule { } 

 Maintenant, nous pourrons utiliser les Ă©lĂ©ments dynamiques proposĂ©s par Bootstrap dĂšs que nous en aurons besoin, Ă  n’importe quel endroit de notre application ! 

😉

Nous avons maintenant ajoutĂ© la librairie de style polyvalente Bootstrap dans notre application, et nous pourrons l’utiliser pour facilement mettre en forme les pages de notre application. De plus, comme nous l’avons intĂ©grĂ© au niveau du module Shared, nous pouvons l’utiliser dans n’importe quel composant !

Dans le prochain Ă©pisode, nous verrons comment ajouter et intĂ©grer des petites icĂŽnes, qui serviront d’indicateurs visuels, dans notre application Awesome List. Nous ajouterons la librairie des Material Icons, et nous verrons comment l’intĂ©grer dans notre projet gĂ©nĂ©rĂ© avec Angular CLI.


Cet article est un extrait de ma formation “MaĂźtriser Angular : RĂ©ussir votre prochain projet en entreprise ». Si vous souhaitez rĂ©ussir votre prochain projet Angular, vous pouvez recevoir mes recommandations par email.