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.

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.