Comment ajouter Bootstrap à Angular [étape par étape]

HTML, JavaScript et CSS font partie des piliers du développement frontal. Angular est l’un des frameworks JavaScript les plus utilisés pour créer des applications côté client. Par ailleurs, Bootstrap est l’un des frameworks d’interface utilisateur (UI) les plus populaires.

Les frameworks sont une collection d’un ensemble de codes, d’outils et de bibliothèques prédéfinis qui offrent une manière prédéfinie de construire des applications. Bootstrap et Angular sont tous deux des frameworks.

Dans cet article, nous allons définir chaque framework et discuter des avantages de la combinaison des deux technologies et de la manière de les combiner pour créer des applications visuellement attrayantes et puissantes.

Qu’est-ce que Bootstrap ?

Bootstrap est une boîte à outils frontale gratuite permettant de créer des applications mobiles. Ce framework HTML, CSS et JavaScript dispose d’une grande collection de morceaux de code réutilisables que les développeurs peuvent utiliser sur différentes parties de leurs projets.

Ce framework propose des modèles de conception pour diverses fonctionnalités telles que les boutons, les fenêtres modales, les carrousels d’images, les tableaux, les navigations, et bien plus encore. Bootstrap dispose d’une documentation complète qui facilite son utilisation.

Qu’est-ce qu’AngularJS ?

AngularJS est un framework JavaScript qui étend la syntaxe du HTML au-delà d’un langage de balisage ordinaire. Ce framework introduit des fonctionnalités telles que la liaison de données qui permettent aux développeurs d’éviter le processus complexe de création de pages web réactives lorsqu’ils utilisent le HTML.

AngularJS utilise le cadre modèle-vue-contrôleur (MVC), où il existe une séparation claire entre la logique de l’application et l’interface utilisateur. Les développeurs peuvent utiliser AngularJS pour créer des applications web à page unique, des applications de réseaux sociaux, des plateformes de commerce électronique, des systèmes de gestion de contenu, et bien plus encore.

Avantages de l’utilisation de Bootstrap dans Angular

• Composants d’interface utilisateur préconstruits : Vous n’avez pas besoin de créer des barres de navigation, des boutons, des carrousels et des cartes à partir de zéro, car Bootstrap dispose de morceaux de code préconstruits que vous pouvez utiliser. Ainsi, les développeurs peuvent se concentrer sur les fonctionnalités tandis que Bootstrap s’occupe de la structure de base et du style.
• Personnalisable : Les composants préconstruits fournissent un code standard. Cependant, vous pouvez personnaliser le code lorsque vous travaillez sur votre application. Par exemple, si vous prenez une carte de Bootstrap, vous pouvez modifier divers éléments, tels que les images et le texte, pour répondre à vos besoins.
• Réactif : Les internautes modernes naviguent sur différents appareils, qu’il s’agisse de smartphones, de tablettes ou d’ordinateurs. Vous n’avez pas besoin de créer une application pour chaque taille d’écran, car Bootstrap fournit des applications web réactives.
• Apporte un style cohérent : Une bonne application web doit avoir une sensation et un aspect cohérents sur les différentes pages. L’utilisation d’éléments et de composants Bootstrap peut vous aider à atteindre cet objectif.
• Une communauté forte : Ce framework est doté de nombreuses ressources et d’une documentation solide, et il est soutenu par de nombreux développeurs.

Conditions préalables

#1. Node.js

Il s’agit d’un environnement d’exécution JavaScript que vous utiliserez pour exécuter du code JavaScript en dehors du navigateur. Vous pouvez vérifier la version actuelle de votre Node.js en lançant cette commande ;

node -v

Vous pouvez l’installer depuis le site officiel s’il n’est pas installé.

#2. Gestionnaire de paquets Node (NPM)

NPM va gérer tous les paquets associés dont vous avez besoin pour votre application Angular. NPM est installé par défaut lorsque vous installez Node.js. Vous pouvez vérifier la version actuelle en utilisant cette commande ;

npm -v

#3. CLI Angular

C’est un outil en ligne de commande que nous utiliserons pour créer la structure de base d’une application Angular. Vous pouvez installer Angular CLI en utilisant cette commande ;

npm install -g @angular/cli

#4. Un environnement de développement intégré (IDE)

C’est ici que vous écrirez votre code. Vous pouvez utiliser n’importe quel IDE qui supporte JavaScript, comme Visual Studio Code ou Webstorm.

Comment ajouter Bootstrap à Angular

Nous avons maintenant tous les outils nécessaires pour créer notre application Angular. Il existe deux approches principales pour ajouter Bootstrap à Angular : 1. installer Bootstrap en utilisant NPM. 2. Utiliser les liens CDN

Approche 1 : Utilisation de NPM

Nous pouvons installer toute la bibliothèque Bootstrap dans notre projet en utilisant NPM. Suivez les étapes suivantes ;

Étape 1 : Utilisez Angular CLI pour mettre en place la structure de base de l’application

Une application Angular typique comporte de nombreux fichiers. Nous nommerons notre application angular-bootstrap-mockup (vous pouvez donner à votre application le nom qui vous plaît). Utilisez cette commande pour configurer votre application ;

ng new angular-bootstrap-mockup

Vous serez amené à répondre aux questions suivantes ;

• Souhaitez-vous ajouter le routage Angular ? (y/N) entrez y
• Quel format de feuille de style souhaitez-vous utiliser ? Sélectionnez CSS

Une fois la configuration terminée, vous aurez quelque chose de similaire à ceci sur votre terminal.

Naviguez dans le projet créé et passez à l’étape 2. Vous pouvez utiliser cette commande ;

cd angular-bootstrap-mockup

Ouvrez le projet dans votre éditeur de code. La structure du projet sera la suivante ;

Étape 2 : installez bootstrap et les icônes bootstrap.

Exécutez cette commande pour installer les deux ;

npm install bootstrap bootstrap-icons

Étape 3 : Inclure Bootstrap dans le fichierangular.json

Localisez le fichier angular.json dans le dossier 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 : installez ng-bootstrap

Ng-bootstrap est une collection de composants Angular UI construits au-dessus du framework Bootstrap. Les différents composants de cette bibliothèque sont conçus pour fonctionner avec AngularJS.

Utilisez cette commande pour l’installer ;

npm install @ng-bootstrap/ng-bootstrap

Étape 5 : Modifiez app.module.ts pour inclure NgbModule.

Modifiez le contenu du fichier app.module.ts avec ceci ;

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({

  déclarations : [

    AppComponent,

  ],

  imports : [

    BrowserModule,

    NgbModule,

    AppRoutingModule,

  ],

  fournisseurs : [

  ],

  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

Il y a des tonnes de composants à choisir sur le site Web de Bootstrap. Nous allons créer une barre de navigation simple et ajouter deux boutons.

Modifiez le contenu du fichier app.component.html comme suit ;

<ul class="nav"&gt
  <li class="nav-item"&gt
    <a class="nav-link active" aria-current="page" href="#">Accueil</a&gt
  </li&gt
  <li class="nav-item"&gt
    <a class="nav-link" href="#">Services</a&gt
  </li&gt
  <li class="nav-item"&gt
    <a class="nav-link" href="#">A propos</a&gt
  </li&gt
  <li class="nav-item"&gt
    <a class="nav-link disabled">Blog</a&gt
  </li&gt
</ul&gt
<button type="button" class="btn btn-primary btn-lg">Angulaire</button&gt
<button type="button" class="btn btn-secondary btn-lg">Bootstrap</button&gt

Étape 7 : Exécutez votre application

Utilisez cette commande ;

ng serve

Lorsque le développement Angular est lancé, vous pouvez ouvrir http://localhost:4200/ dans votre navigateur.

Approche 2 : Ajouter Bootstrap à Angular en utilisant des liens CDN

Cette approche vous permet de créer un lien direct vers le réseau de diffusion de contenu (CDN) qui stocke les fichiers Bootstrap.

Nous pouvons créer plusieurs boutons en utilisant cette approche dans un nouveau projet. Suivez les étapes suivantes ;

Étape 1 : Créez un nouveau projet Angular

Nous nommerons notre application angular-bootstrap-cdn(vous pouvez choisir n’importe quel nom).

Exécutez la commande suivante ;

ng new angular-bootstrap-cdn

Une fois l’installation terminée, changez de répertoire et ouvrez votre projet dans un éditeur de code. Vous pouvez utiliser cette commande pour entrer dans le répertoire du projet ;

cd angular-bootstrap-cdn

Étape 2 : Inclure le lien CDN dans le fichier index.html

Localisez le fichier src/index.html et le lien CDN dans la section head.

<head&gt
.......
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt
........
</head&gt

Étape 3 : Ajouter le code Bootstrap au fichierapp.component.html

Localisez le fichier src/app/app.component.html.

Vous pouvez ajouter ce code au fichier ;

<button type="button" class="btn btn-primary">Primaire</button&gt
<button type="button" class="btn btn-secondary">Secondaire</button&gt
<button type="button" class="btn btn-success">Succès</button&gt
<button type="button" class="btn btn-danger">Danger</button&gt
<button type="button" class="btn btn-warning">Avertissement</button&gt
<button type="button" class="btn btn-info">Info</button&gt
<button type="button" class="btn btn-light">Light</button&gt
<button type="button" class="btn btn-dark">Foncé</button&gt
<button type="button" class="btn btn-link">Lien</button&gt

Étape 4 : Exécutez votre application

ng serve

Questions fréquemment posées

Conclusion

Vous pouvez désormais utiliser confortablement deux des frameworks frontaux les plus populaires, Angular et Bootstrap, pour créer diverses applications.

Le choix de l’approche dépendra du cas d’utilisation et du type d’application que vous souhaitez créer.

Même si l’approche CDN semble facile, elle présente également plusieurs inconvénients. Le principal problème est la sécurité de votre application, car les pirates peuvent utiliser les CDN pour envoyer des scripts malveillants sur votre site web.

L’installation de Bootstrap à l’aide de NPM vous permet de contrôler le code que vous incluez dans votre application. Cependant, cette approche peut prendre du temps car vous devez télécharger toutes les dépendances.

Découvrez comment ajouter Bootstrap à une application React.