Comment utiliser Bootstrap dans un projet angulaire?
Je commence ma première application angulaire et ma configuration de base est terminée.
Comment puis-je ajouter Bootstrap à mon application?
Si vous pouvez donner un exemple, ce serait une aide précieuse.
Si vous utilisez Angular-CLI pour générer de nouveaux projets, il existe un autre moyen de rendre le bootstrap accessible dans Angular 2/4 .
- Via l’interface de ligne de commande, accédez au dossier du projet. Ensuite, utilisez npm pour installer bootstrap:
$ npm install --save bootstrap. L'option--savefera apparaître bootstrap dans les dépendances. - Editez le fichier .angular-cli.json, qui configure votre projet. C'est dans le répertoire du projet. Ajoutez une référence au tableau
"styles". La référence doit être le chemin relatif du fichier d'amorçage téléchargé avec npm. Dans mon cas c'est:"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Mon exemple .angular-cli.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "bootstrap-test"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
Maintenant, bootstrap devrait faire partie de vos paramètres par défaut.
Une intégration avec Angular2 est également disponible via le projet ng2-bootstrap: https://github.com/valor-software/ng2-bootstrap .
Pour l'installer, placez simplement ces fichiers dans votre page HTML principale:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Ensuite, vous pouvez l’utiliser dans vos composants de la manière suivante:
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
Tout ce que vous avez à faire est d’inclure le css bootstrap dans votre fichier index.html.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Une autre très bonne (meilleure?) Alternative consiste à utiliser un ensemble de widgets créés par l'équipe angular-ui: https://ng-bootstrap.github.io
Si vous prévoyez d'utiliser Bootstrap 4, requis avec le ng-bootstrap de l'équipe angular-ui, mentionné dans ce fil de discussion, vous préférerez utiliser celui-ci (REMARQUE: vous n'avez pas besoin d'inclure le fichier JS fichier):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
Vous pouvez également référencer cela localement après avoir exécuté npm install [email protected] --save en pointant sur le fichier dans votre fichier styles.scss, en supposant que vous utilisez SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
L'option la plus populaire consiste à utiliser une bibliothèque tierce distribuée sous la forme d'un package npm, telle que ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap ou la bibliothèque de démarrage Angular UI.
Personnellement, j'utilise ng2-bootstrap. Il existe de nombreuses façons de le configurer, car la configuration dépend de la manière dont votre projet Angular est construit. Je publie ci-dessous un exemple de configuration basé sur le projet Angular 2 QuickStart https://github.com/angular/quickstart
Tout d'abord, nous ajoutons des dépendances dans notre package.json
{ ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }
Ensuite, nous devons mapper les noms sur les URL appropriées dans systemjs.config.js
(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);
Nous devons importer le fichier bootstrap .css dans index.html. Nous pouvons l'obtenir à partir du répertoire/node_modules/bootstrap de notre disque dur (car nous avons ajouté la dépendance à l'amorçage 3.3.7) ou du Web. Là nous l'obtenons du web:
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Nous devrions éditer notre fichier app.module.ts à partir du répertoire/app
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Et enfin notre fichier app.component.ts à partir du répertoire/app
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}
Ensuite, nous devons installer nos dépendances bootstrap et ng2-bootstrap avant de lancer notre application. Nous devrions aller dans notre répertoire de projet et taper
npm install
Enfin, nous pouvons démarrer notre application
npm start
Il existe de nombreux exemples de code sur le projet github du projet ng2-bootstrap montrant comment importer ng2-bootstrap dans différentes versions de projets Angular 2. Il y a même échantillon plnkr. Il existe également une documentation API sur le site Web Valor-software (auteurs de la bibliothèque).
Dans un environnement angular-cli, le moyen le plus simple que j'ai trouvé est le suivant:
1. Solution dans un environnement avec des feuilles de style sc̲s̲s -
npm install bootstrap-sass —save
Dans style.scss:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
Remarque1: Le caractère ~ fait référence au dossier nodes_modules.
Note2: Comme nous utilisons scss, nous pouvons personnaliser toutes les variables boostrap que nous voulons.
2. Solution dans un environnement avec des feuilles de style c̲s̲s̲
npm install bootstrap —save
Dans style.css:
@import '~bootstrap/dist/css/bootstrap.css';
Il existe plusieurs façons de configurer angular2 avec Bootstrap. L’une des manières les plus complètes d’en tirer le meilleur parti consiste à utiliser ng-bootstrap. Cette configuration permet à algular2 de contrôler entièrement notre DOM, évitant ainsi d’utiliser JQuery et Boostrap .js.
1-Prenez comme point de départ un nouveau projet créé avec Angular-CLI et en utilisant la ligne de commande, installez ng-bootstrap:
npm install @ng-bootstrap/ng-bootstrap --save
Note: Plus d'infos sur https://ng-bootstrap.github.io/#/getting-started
2-Ensuite, nous devons installer bootstrap pour le système css et le système de grille.
npm install [email protected] --save
Remarque: Plus d’informations sur https://getbootstrap.com/docs/4.0/getting-started/download/
Nous avons maintenant la configuration de l'environnement et pour cela nous devons changer le .angular-cli.json en ajoutant au style:
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
Voici un exemple:
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
La prochaine étape consiste à ajouter le module ng-boostrap à notre projet. Pour ce faire, nous devons ajouter le fichier app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
Ajoutez ensuite le nouveau module à l'application: NgbModule.forRoot ()
Exemple:
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
Nous pouvons maintenant commencer à utiliser bootstrap4 sur notre projet angular2/5.
J'ai eu la même question et trouvé cet article avec une solution vraiment propre:
http://leon.radley.se/2017/01/angular-cl-and-bootstrap-4/
Voici les instructions, mais avec ma solution simplifiée:
Installez Bootstrap 4 ( instructions ):
npm install --save [email protected]
Si nécessaire, renommez votre src/styles.css en styles.scss et mettez à jour .angular-cli.json pour refléter le changement:
"styles": [
"styles.scss"
],
Ajoutez ensuite cette ligne à styles.scss:
@import '~bootstrap/scss/bootstrap';
il suffit de vérifier votre fichier package.json et d'ajouter des dépendances pour le démarrage
"dependencies": {
"bootstrap": "^3.3.7",
}
puis ajoutez le code ci-dessous sur le fichier .angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Enfin, vous venez de mettre à jour votre npm localement en utilisant un terminal
$ npm update
Procédure avec Angular 6+ et Bootstrap 4+:
- Ouvrez un shell sur le dossier de votre projet
- Installez bootstrap avec la commande:
npm install --save [email protected] - Le bootstrap a besoin de la dépendance jquery. Si vous ne l’avez pas, vous pouvez l’installer avec la commande:
npm install --save jquery 1.9.1 - Vous devrez peut-être réparer la vulnérabilité à l'aide de la commande suivante:
npm audit fix - Dans votre fichier principal.scss, ajoutez la ligne suivante:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
OR
Ajoutez cette ligne à votre fichier index.html principal: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
- npm install --save bootstrap
allez dans le fichier -> angular-cli.json , trouvez les propriétés du style et ajoutez simplement la prochaine étape: "../node_modules/bootstrap/dist/css/bootstrap.min.css", cela pourrait ressembler à ceci:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Je cherchais la même réponse et finalement j'ai trouvé ce lien. Vous pouvez expliquer trois manières différentes d’ajouter bootstrap css à votre projet angular 2. Ça m'a aidé.
Voici le lien: http://codingthesmartway.com/using-bootstrap-with-angular/
Vous pouvez essayer d’utiliser la bibliothèque Prettyfox UI http://ng.prettyfox.org
Cette bibliothèque utilise les styles bootstrap 4 et ne nécessite pas jquery.
Si vous utilisez angular cli, après avoir ajouté bootstrap dans package.json et installé le paquet, il vous suffit d’ajouter boostrap.min.css à la section "styles" de .angular-cli.json.
Une chose importante est "Lorsque vous apportez des modifications à .angular-cli.json, vous devez redémarrer le serveur pour prendre en compte les modifications de configuration."
Ref:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Ma recommandation serait au lieu de le déclarer dans le stylet json pour le mettre dans le fichier scss afin que tout soit compilé et au même endroit.
1) installer bootstrap avec npm
npm install bootstrap
2) Déclarez bootstrap npm dans le css avec nos styles
Créer _bootstrap-custom.scss:
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.
3) Dans le styles.scss nous insérons
@import "bootstrap-custom";
donc nous aurons tout notre noyau compilé et en un seul endroit
ajoutez les lignes suivantes dans votre page html
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Une autre très bonne alternative consiste à utiliser le squelette Angular 2/4 + Bootstrap 4
1) Télécharger Zip et extraire le dossier Zip
2) ng servir