Je démarre ma première application Angular et ma configuration de base est terminée.
Comment puis-je ajouter Bootstrap à mon application?
Si vous pouvez donner un exemple, ce serait d'une grande aide.
Je démarre ma première application Angular et ma configuration de base est terminée.
Comment puis-je ajouter Bootstrap à mon application?
Si vous pouvez donner un exemple, ce serait d'une grande aide.
Réponses:
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 .
$ npm install --save bootstrap. L' --saveoption fera apparaître bootstrap dans les dépendances."styles"tableau. 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": {}
}
}Le bootstrap devrait maintenant 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 cette façon:
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 boostrap 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">app.component.html. s'il vous plaît, dites.
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 qui est requis avec le ng-bootstrap de l'équipe angular-ui qui est mentionné dans ce fil, vous voudrez l'utiliser à la place (REMARQUE: vous n'avez pas besoin d'inclure le fichier JS):
<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 l'exécution npm install bootstrap@4.0.0-alpha.6 --saveen pointant sur le fichier dans votre styles.scssfichier, en supposant que vous utilisez SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';@importfaire dans votre fichier SASS. Sinon, vous pouvez essayer de l'ajouter à votre vendor.tsfichier, mais je ne l'utilise pas dans mon code.
L'option la plus populaire consiste à utiliser une bibliothèque tierce distribuée en tant que package npm comme le projet ng2-bootstrap https://github.com/valor-software/ng2-bootstrap ou la bibliothèque Angular UI Bootstrap.
J'utilise personnellement ng2-bootstrap. Il existe de nombreuses façons de le configurer, car la configuration dépend de la façon dont votre projet Angular est construit. Ci-dessous, je poste 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 aux 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 depuis le répertoire / node_modules / bootstrap sur notre disque dur (car nous avons ajouté la dépendance bootstrap 3.3.7) ou depuis le Web. Là, nous l'obtenons à partir 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 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 d'exécuter notre application. Nous devrions aller dans notre répertoire de projet et taper
npm installEnfin, nous pouvons démarrer notre application
npm startIl existe de nombreux exemples de code sur github du projet ng2-bootstrap montrant comment importer ng2-bootstrap dans diverses versions de projet Angular 2. Il y a même un échantillon plnkr. Il existe également une documentation API sur le site Web de 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 s̲c̲s̲s̲
npm install bootstrap-sass —saveDans style.scss:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';Remarque 1: Le ~caractère est une référence au dossier nodes_modules .
Note 2: 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 —saveDans style.css:
@import '~bootstrap/dist/css/bootstrap.css';Il existe plusieurs façons de configurer angular2 avec Bootstrap, l'un des moyens les plus complets pour en tirer le meilleur parti est d'utiliser ng-bootstrap, en utilisant cette configuration, nous donnons à algular2 un contrôle complet sur notre DOM, évitant le besoin 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 --saveRemarque: plus d'informations sur https://ng-bootstrap.github.io/#/getting-started
2-Ensuite, nous devons installer bootstrap pour le css et le système de grille.
npm install bootstrap@4.0.0-beta.2 --saveRemarque: 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 sur app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';Ajoutez ensuite le nouveau module à l'application d'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 j'ai trouvé cet article avec une solution vraiment propre:
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
Voici les instructions, mais avec ma solution simplifiée:
Installez Bootstrap 4 ( instructions ):
npm install --save bootstrap@4.0.0-alpha.6Si 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';vérifiez simplement votre fichier package.json et ajoutez des dépendances pour bootstrap
"dependencies": {
"bootstrap": "^3.3.7",
}puis ajoutez le code ci-dessous sur le .angular-cli.jsonfichier
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],Enfin, il vous suffit de mettre à jour votre npm localement en utilisant le terminal
$ npm updateallez dans -> fichier angular-cli.json , trouvez les propriétés des styles et ajoutez simplement la piqûre suivante: "../node_modules/bootstrap/dist/css/bootstrap.min.css", cela pourrait ressembler à ceci:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],Procédure avec Angular 6+ et Bootstrap 4+:
npm install --save bootstrap@4.1.3npm install --save jquery 1.9.1npm audit fix@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";OU
Ajoutez cette ligne à votre fichier principal index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Je cherchais la même réponse et j'ai finalement trouvé ce lien. Vous pouvez trouver trois façons différentes d'ajouter du bootstrap css à votre projet angular 2. Ça m'a aidé.
Voici le lien: http://codingthesmartway.com/using-bootstrap-with-angular/
Ma recommandation serait au lieu de le déclarer dans le stylet json pour le mettre dans le scss afin que tout soit compilé et en un seul endroit.
1) installer bootstrap avec npm
npm install bootstrap2) 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
Vous pouvez essayer d'utiliser la bibliothèque d'interface utilisateur de Prettyfox http://ng.prettyfox.org
Cette bibliothèque utilise les styles bootstrap 4 et n'a pas besoin de jquery.
Si vous utilisez angular cli, après avoir ajouté bootstrap dans package.json et installé le package, tout ce dont vous avez besoin est d'ajouter boostrap.min.css dans la section "styles" de .angular-cli.json.
Une chose importante est "Lorsque vous apportez des modifications à .angular-cli.json, vous devrez redémarrer ng serve pour récupérer les modifications de configuration."
Réf:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Une autre très bonne alternative est d'utiliser le squelette Angular 2/4 + Bootstrap 4
1) Téléchargez le ZIP et extrayez le dossier zip
2) ng servir