Les fondations du développement front-end reposent sur HTML, JavaScript et CSS. Pour construire des applications côté client, Angular s’impose comme un des frameworks JavaScript les plus populaires. En parallèle, Bootstrap se distingue parmi les frameworks d’interface utilisateur (UI) les plus largement adoptés.
Les frameworks, en essence, sont des ensembles préconfigurés de code, d’outils et de bibliothèques qui normalisent la création d’applications. Bootstrap et Angular incarnent cette définition en tant que frameworks.
Dans cet article, nous allons explorer chaque framework, examiner les avantages d’une combinaison des deux, et détailler comment les intégrer pour développer des applications à la fois esthétiques et performantes.
Qu’est-ce que Bootstrap ?
Bootstrap est une solution frontale gratuite conçue pour faciliter la création d’applications adaptables aux mobiles. Ce framework, basé sur HTML, CSS et JavaScript, met à disposition une large collection de portions de code réutilisables, utilisables par les développeurs à travers différentes parties de leurs projets.
Il offre des modèles de conception prêts à l’emploi pour divers éléments, tels que les boutons, les modales, les carrousels d’images, les tableaux, les menus de navigation et bien d’autres. Bootstrap bénéficie également d’une documentation détaillée, facilitant sa prise en main.
Qu’est-ce qu’AngularJS ?
AngularJS est un framework JavaScript qui enrichit la syntaxe HTML, la faisant dépasser son rôle de simple langage de balisage. Il introduit des fonctionnalités telles que la liaison de données, permettant aux développeurs de simplifier la création de pages Web interactives par rapport à l’utilisation pure de HTML.
AngularJS s’appuie sur le modèle architectural Modèle-Vue-Contrôleur (MVC), assurant une distinction nette entre la logique applicative et l’interface utilisateur. Avec AngularJS, les développeurs peuvent créer des applications Web monopages, des réseaux sociaux, des plateformes de commerce électronique, des systèmes de gestion de contenu, et bien plus.
Avantages de l’utilisation de Bootstrap dans Angular
- Composants d’interface utilisateur préfabriqués : Inutile de construire des barres de navigation, des boutons, des carrousels ou des cartes à partir de zéro, Bootstrap met à disposition des éléments de code prêts à l’emploi. Ceci permet aux développeurs de se concentrer sur les fonctionnalités, tandis que Bootstrap se charge de la structure et du style de base.
- Personnalisation : Bien que les composants préfabriqués soient un bon point de départ, leur code peut être personnalisé pour correspondre aux besoins spécifiques de l’application. Par exemple, une carte Bootstrap peut être modifiée en termes d’images et de texte pour répondre à un besoin spécifique.
- Adaptabilité : Les utilisateurs d’aujourd’hui naviguent à partir de divers appareils, des smartphones aux ordinateurs. Bootstrap rend vos applications Web adaptables à chaque taille d’écran, éliminant ainsi le besoin de créer des applications distinctes.
- Cohérence visuelle : Une application Web de qualité doit maintenir une apparence uniforme sur l’ensemble de ses pages. L’utilisation des éléments et des composants Bootstrap permet d’atteindre facilement cet objectif.
- Communauté active : Bootstrap bénéficie d’une communauté de développeurs solide, avec de nombreuses ressources et une documentation riche.
Prérequis
#1. Node.js
Il s’agit d’un environnement d’exécution JavaScript qui permet d’exécuter du code JavaScript en dehors d’un navigateur. Vous pouvez vérifier la version de Node.js installée en exécutant la commande :
node -v
Vous pouvez l’installer à partir du site officiel si ce n’est pas déjà le cas.
#2. Gestionnaire de paquets Node (NPM)
NPM gère tous les paquets nécessaires à votre application Angular. Il est généralement installé par défaut avec Node.js. Vous pouvez vérifier votre version via cette commande :
npm -v
#3. CLI Angular
L’interface en ligne de commande Angular est un outil permettant de créer la structure de base de l’application. L’installation se fait via cette commande :
npm install -g @angular/cli
#4. Un environnement de développement intégré (IDE)
C’est l’outil où vous écrirez le code. Choisissez un IDE compatible avec JavaScript, tel que Visual Studio Code ou Webstorm.
Comment intégrer Bootstrap dans Angular
Nous disposons à présent des outils nécessaires pour commencer la création de notre application Angular. Deux méthodes principales s’offrent à nous pour l’intégration de Bootstrap : 1. Installation de Bootstrap via NPM. 2. Utilisation de liens CDN.
Méthode 1 : Utiliser NPM
L’installation de l’ensemble de la bibliothèque Bootstrap est possible via NPM. Voici les étapes à suivre :
Étape 1 : Utiliser l’interface de ligne de commande Angular pour structurer l’application
Une application Angular typique se compose de plusieurs fichiers. Nommons notre application « angular-bootstrap-mockup » (vous pouvez lui donner le nom que vous souhaitez). Utilisez cette commande pour lancer la configuration :
ng new angular-bootstrap-mockup
Vous serez ensuite invité à répondre aux questions suivantes :
- Souhaitez-vous ajouter le routage Angular ? (o/N) Répondez par y
- Quel format de feuille de style souhaitez-vous utiliser ? Sélectionnez CSS
À la fin de la configuration, vous devriez voir une sortie similaire à celle-ci dans votre terminal.
Naviguez dans le projet créé et passez à l’étape 2. Cette commande peut vous y aider :
cd angular-bootstrap-mockup
Ouvrez le projet dans votre éditeur de code. La structure du projet devrait ressembler à ceci :
Étape 2 : Installer les icônes Bootstrap et Bootstrap
Exécutez cette commande pour installer les deux :
npm install bootstrap bootstrap-icons
Étape 3 : Inclure Bootstrap dans le fichier angular.json
Localisez le fichier angular.json dans le répertoire racine de votre application et modifiez ces lignes :
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"src/styles.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
Étape 4 : Installer ng-bootstrap
Ng-bootstrap est une collection de composants d’interface utilisateur Angular construits sur le framework Bootstrap. Les composants de cette bibliothèque sont spécialement conçus pour fonctionner avec Angular.
Utilisez cette commande pour l’installer :
npm install @ng-bootstrap/ng-bootstrap
Étape 5 : Modifier app.module.ts pour inclure NgbModule.
Modifiez le contenu du fichier app.module.ts avec le code suivant :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule,
AppRoutingModule,
],
providers: [
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
Étape 5 : Modifier app.component.ts
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private modalService: NgbModal) {
}
public open(modal: any): void {
this.modalService.open(modal);
}
}
Étape 6 : Ajouter des éléments Bootstrap au fichier app.component.html
Le site Web de Bootstrap propose de nombreux composants. Pour notre exemple, créons une barre de navigation simple avec deux boutons.
Modifiez le contenu de app.component.html avec le code suivant :
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Blog</a>
</li>
</ul>
<button type="button" class="btn btn-primary btn-lg">Angular</button>
<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button>
Étape 7 : Exécuter l’application
Utilisez cette commande :
ng serve
Une fois le serveur de développement Angular lancé, vous pouvez ouvrir http://localhost:4200/ dans votre navigateur.
Méthode 2 : Utiliser les liens CDN pour ajouter Bootstrap à Angular
Cette méthode permet de se connecter directement au réseau de distribution de contenu (CDN) hébergeant les fichiers Bootstrap.
Nous pouvons créer plusieurs boutons avec cette approche, sur un nouveau projet. Voici les étapes :
Étape 1 : Créer un nouveau projet Angular
Nommons notre application « angular-bootstrap-cdn » (vous pouvez choisir n’importe quel nom).
Exécutez cette commande :
ng new angular-bootstrap-cdn
Une fois l’installation terminée, changez de répertoire et ouvrez le projet dans un éditeur de code. Utilisez cette commande pour accéder au répertoire du projet :
cd angular-bootstrap-cdn
Étape 2 : Ajouter le lien CDN dans le fichier index.html
Localisez le fichier src/index.html et insérez le lien CDN dans la section <head>.
<head>
…….
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
………
</head>
Étape 3 : Ajouter du code Bootstrap dans le fichier app.component.html
Localisez le fichier src/app/app.component.html.
Vous pouvez ajouter ce code dans le fichier :
<button type="button" class="btn btn-primary">Primaire</button> <button type="button" class="btn btn-secondary">Secondaire</button> <button type="button" class="btn btn-success">Succès</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Avertissement</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Clair</button> <button type="button" class="btn btn-dark">Sombre</button> <button type="button" class="btn btn-link">Lien</button>
Étape 4 : Exécuter l’application
ng serve
Questions fréquemment posées
Peut-on utiliser Bootstrap et Angular Material ensemble dans le même projet ?
Oui. Bootstrap et Angular Material sont des bibliothèques d’interface utilisateur servant un objectif similaire. Cependant, il faut éviter de les utiliser simultanément pour le même composant, car cela pourrait créer des conflits. Par exemple, pour créer une page de connexion, il est recommandé de choisir l’une ou l’autre, en fonction des composants disponibles.
Quelle version de Bootstrap est compatible avec Angular ?
Au moment de la rédaction de cet article, la version actuelle de Bootstrap est la v5.3.0-alpha2. La version actuelle d’Angular est, quant à elle, la version 15. Les versions à partir de Bootstrap 4 sont généralement compatibles avec différentes versions d’Angular. Il est toujours préférable de consulter la documentation officielle de Bootstrap et d’Angular avant de les combiner.
Quels types de projets peut-on construire avec Bootstrap et Angular ?
Il n’y a pas de limitation quant au type d’applications que vous pouvez développer avec Bootstrap et Angular. Vous pouvez les utiliser pour créer des applications monopages, des sites Web de commerce électronique, des réseaux sociaux, des tableaux de bord ou des panneaux d’administration. De plus, vous pouvez utiliser Angular en combinaison avec le framework Ionic pour développer des applications mobiles.
Angular est-il un framework JavaScript ou TypeScript ?
Angular est un framework JavaScript. Toutefois, il est écrit en TypeScript, qui est un sur-ensemble de JavaScript. TypeScript apporte des fonctionnalités qui ne sont pas disponibles en JavaScript. Il est donc possible d’utiliser Angular dans des applications TypeScript.
Conclusion
Vous pouvez désormais utiliser en toute confiance les deux frameworks front-end les plus populaires, Angular et Bootstrap, pour développer une grande variété d’applications.
Le choix de l’approche dépendra du cas d’utilisation spécifique et du type d’application que vous souhaitez créer.
Bien que la méthode CDN semble simple, elle présente des inconvénients. Le principal risque est la sécurité de l’application, car des pirates pourraient utiliser les CDN pour introduire des scripts malveillants sur votre site Web.
L’installation de Bootstrap avec NPM vous donne un meilleur contrôle sur le code que vous incluez dans votre application. Toutefois, cette approche peut prendre plus de temps, car il faut télécharger toutes les dépendances.
Découvrez également comment ajouter Bootstrap à une application React.