Geekflare est soutenu par son public. Nous pouvons percevoir des commissions d'affiliation sur les liens d'achat présents sur ce site.
En Développement Dernière mise à jour : 25 septembre 2023
Partager sur :
Invicti Web Application Security Scanner - la seule solution qui offre une vérification automatique des vulnérabilités avec Proof-Based Scanning™.

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 ?

Qu'est-ce que le bootstrap ?

Bootstrap est une boîte à outils frontale gratuite permettant de créer des applications mobiles. Ce cadre 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 ?

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 installateur 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 écrivez votre code. Vous pouvez utiliser n'importe quel IDE qui supporte JavaScript, comme Code Visual Studio 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 CLI Angular 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.

Screenshot-from-2023-03-29-10-44-09

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 ;

Screenshot-from-2023-03-29-10-49-20

Étape 2 : installez amorçage 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"

]
image-293

Etape 4 : installer 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({

 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

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">

 <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="#">A propos de</a>

 </li>

 <li class="nav-item">

 <a class="nav-link disabled">Blog</a>

 </li>

</ul>

<button type="button" class="btn btn-primary btn-lg">Angulaire</button>

<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.

screenzy-1680103584535-2

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>

.......

 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

.........

</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>

<button type="button" class="btn btn-secondary">Secondaire</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-danger">Danger</button> <button type="button" class="btn btn-danger">Dangerbutton type="button" class="btn btn-warning">Avertissement</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button&gt

Étape 4 : Exécutez votre application

ng serve

Questions fréquemment posées

Pouvez-vous utiliser Bootstrap et Angular Material dans le même projet ?

Oui. Bootstrap et Angular Material sont des bibliothèques d'interface utilisateur créées dans le même but. Cependant, vous ne devriez pas utiliser les deux bibliothèques lorsque vous traitez avec le même composant, car elles sont susceptibles de se planter. Par exemple, si vous souhaitez créer une page de connexion, choisissez l'une ou l'autre en fonction des composants disponibles.

Quelle version de Bootstrap est compatible avec Angular ?

La version actuelle de Bootstrap, à l'heure où nous écrivons ces lignes, est la v5.3.0-alpha2. D'autre part, la version actuelle d'Angular est Angular 15. Tout ce qui est à partir de Bootstrap 4 est compatible avec les différentes versions d'Angular. Cependant, vérifiez toujours la documentation sur les sites officiels de Bootstrap et d'Angular lorsque vous combinez les deux technologies

Quels projets pouvez-vous construire en utilisant Bootstrap et Angular ?

Il n'y a pas de limitation sur la nature des applications que vous pouvez construire en utilisant Bootstrap et Angular. Vous pouvez utiliser ces deux technologies pour créer des applications à page unique, des sites de commerce électronique, des plateformes sociales, des tableaux de bord et des panneaux d'administration. Vous pouvez également utiliser Angular avec le framework Ionic pour créer des applications mobiles.

Angular est-il un framework JavaScript ou TypeScript ?

Angular est un framework JavaScript. Cependant, Angular est écrit en TypeScriptTypeScript est un surensemble de JavaScript. TypeScript introduit de nouvelles fonctionnalités qui ne sont pas disponibles en JavaScript. Vous pouvez donc utiliser Angular avec des applications TypeScript et Angular.

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épend 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.

  • Titus Kamunya
    Auteur
Merci à nos sponsors
D'autres lectures intéressantes sur le développement
Alimentez votre entreprise
Quelques outils et services pour aider votre entreprise à se développer.
  • Invicti utilise le Proof-Based Scanning™ pour vérifier automatiquement les vulnérabilités identifiées et générer des résultats exploitables en quelques heures seulement.
    Essayez Invicti
  • Web scraping, proxy résidentiel, proxy manager, web unlocker, search engine crawler, et tout ce dont vous avez besoin pour collecter des données web.
    Essayez Brightdata
  • Monday.com est un système d'exploitation tout-en-un qui vous aide à gérer vos projets, vos tâches, votre travail, vos ventes, votre CRM, vos opérations, vos flux de travail et bien plus encore.
    Essayez le lundi
  • Intruder est un scanner de vulnérabilité en ligne qui détecte les faiblesses de votre infrastructure en matière de cybersécurité, afin d'éviter des violations de données coûteuses.
    Essayer l'intrus