Ajouter une librairie UI

Objectifs de ce chapitre

✔️

Ajoutez une librairie d'interface utilisateur à votre projet

Découvrez comment ajouter Bootstrap (librairie UI), à votre projet afin d'améliorer l'interface utilisateur de votre application.

Non spécifique à Angular, l’ajout de cette librairie améliorera l’interface utilisateur de l’application plutôt que de s’appuyer sur les styles de navigateur par défaut.

Qu’est-ce qu’une librairie d’interface utilisateur (UI) ?

Une librairie d’interface utilisateur (UI) est une collection de composants stylisés et réutilisables. Ils peuvent être utilisés pour créer une interface utilisateur. Cela permet de créer une apparence cohérente dans l’ensemble de l’application et de gagner en temps de développement.

Pour ce cours, vous ajouterez Bootstrap à votre projet.

Comment ajouter Bootstrap ?

Plutôt que de l’installer directement et pour plus de facilité, vous utiliserez une librairie Angular qui enveloppe Bootstrap : NG Bootstrap.

La commande d’installation de NG-Bootstrap ng add @ng-bootstrap/ng-bootstrap installera Bootstrap en tant que dépendance dans votre fichier package.json et ajoutera la configuration nécessaire à votre projet.

🎓 Instructions

Exécutez la commande suivante dans votre terminal :
Fenêtre de terminal
```
ng add @ng-bootstrap/ng-bootstrap@16.0.0
```
Arrêtez le serveur s’il est toujours en cours d’exécution (raccourci clavier CTRL+C) et redémarrez-le avec la commande suivante :
Fenêtre de terminal
```
ng serve
```

Ouvrez le fichier src/app/app.component.html et remplacez le contenu par le code suivant pour ajouter des classes Bootstrap :

<header class="navbar bg-body-tertiary px-4">
    <h1 class="navbar-brand fw-bold">Angular Practical course</h1>
</header>

Découvrez les petits changements dans votre navigateur.

✔️ Ce que vous avez appris

Vous avez appris à ajouter une librairie UI à votre application Angular. La plupart des bibliothèques Angular utilisent la commande ng add pour faciliter le processus d’installation. Cela évite de dépendre de la commande npm install et des mises à jour manuelles supplémentaires de la configuration de votre projet.

Les prochains chapitres, vous utiliserez les classes Bootstrap dans des extraits HTML pour améliorer l’interface utilisateur de l’application. Vous n’aurez pas besoin d’explorer la documentation Bootstrap, car les extraits vous seront fournis.

bootstrap fait également référence au bootstrapping d’une application.
Ce n’est pas la même chose que d’ajouter la librairie Bootstrap UI à votre projet.

Le bootstrapping fait référence au processus d’initialisation d’une application. C’est le processus de chargement d’un ensemble d’instructions qui seront utilisées pour démarrer l’application.

Par exemple, Angular utilise le fichier src/main.ts pour démarrer l’application. Ce fichier est le point d’entrée de l’application. C’est le premier fichier exécuté au démarrage de l’application.

Le fichier main.ts contient le code suivant :

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));