Ik start mijn eerste Angularapplicatie en mijn basisconfiguratie is klaar.
Hoe kan ik Bootstraptoevoegen aan mijn applicatie?
Als u een voorbeeld kunt geven, zou dat een grote hulp zijn.
Antwoord 1, autoriteit 100%
Op voorwaarde dat u de Angular-CLIgebruikt om nieuwe projecten te genereren, is er een andere manier om bootstrap toegankelijk te maken in Angular 2/4.
- Navigeer via de opdrachtregelinterface naar de projectmap. Gebruik vervolgens npmom bootstrap te installeren:
$ npm install --save bootstrap. De optie--savezorgt ervoor dat bootstrap in de afhankelijkheden verschijnt. - Bewerk het .angular-cli.json-bestand, dat uw project configureert. Het staat in de projectdirectory. Voeg een verwijzing toe aan de array
"styles". De verwijzing moet het relatieve pad zijn naar het bootstrap-bestand dat is gedownload met npm. In mijn geval is dat:"../node_modules/bootstrap/dist/css/bootstrap.min.css",
Mijn voorbeeld .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": {}
}
}
Nu zou bootstrap deel moeten uitmaken van uw standaardinstellingen.
Antwoord 2, autoriteit 65%
Een integratie met Angular2 is ook beschikbaar via het ng2-bootstrap-project: https:// github.com/valor-software/ng2-bootstrap.
Om het te installeren, plaatst u deze bestanden op uw HTML-hoofdpagina:
<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">
Dan kun je het op deze manier in je componenten gebruiken:
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 {
}
Antwoord 3, autoriteit 32%
Het enige wat u hoeft te doen is de boostrap css in uw index.html-bestand op te nemen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Antwoord 4, Autoriteit 18%
Nog een zeer goed (beter?) Alternatief is om een reeks widgets te gebruiken die zijn gemaakt door het Angular-UI-team: https: // ng- bootstrap.github.io
Antwoord 5, Autoriteit 13%
Als u van plan bent om Bootstrap 4 te gebruiken die nodig is met het egular-ui-team ng-bootstrap dat wordt vermeld in deze thread, u wilt dit in plaats daarvan gebruiken (OPMERKING: U hoeft het JS-bestand niet op te nemen):
<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">
U kunt deze lokaal ook verwijzen na het uitvoeren van npm install [email protected] --savedoor naar het bestand in uw styles.scssFile te wijzen , Aangenomen dat u SASS gebruikt:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
Antwoord 6, Autoriteit 8%
De meest populaire optie is om een aantal bibliotheek van derden te gebruiken die is gedistribueerd als NPM-pakket zoals NG2-Bootstrap-project https://github.com/valor-software/ng2-bootstrap of hoekige UI bootstrap-bibliotheek.
Ik gebruik persoonlijk ng2-bootstrap. Er zijn veel manieren om het te configureren, omdat de configuratie afhangt van hoe uw Angular-project is gebouwd. Hieronder post ik een voorbeeldconfiguratie op basis van Angular 2 QuickStart-project https://github.com/angular/quickstart
Eerst voegen we afhankelijkheden toe aan onze 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"
},
... }
Vervolgens moeten we namen toewijzen aan de juiste URL’s in 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);
We moeten het bootstrap .css-bestand importeren in index.html. We kunnen het uit de map /node_modules/bootstrap op onze harde schijf halen (omdat we bootstrap 3.3.7-afhankelijkheid hebben toegevoegd) of van web. Daar halen we het van internet:
<!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>
We moeten ons bestand app.module.ts bewerken vanuit de map /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 { }
En tot slot ons bestand app.component.ts uit de map /app
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}
Dan moeten we onze Bootstrap- en NG2-bootstrap-afhankelijkheden installeren voordat we onze app uitvoeren. We moeten naar onze projectdirectory en type
npm install
Eindelijk kunnen we onze app
starten
npm start
Er zijn veel codemonsters op NG2-Bootstrap Project Github die laat zien hoe u NG2-bootstrap importeert naar verschillende hoekige 2-projectbouw. Er is zelfs PLNKR-monster. Er is ook API-documentatie op valor-software (auteurs van de bibliotheek) -website.
Antwoord 7, Autoriteit 8%
In een hoek-cli-omgeving, de meest eenvoudige manier die ik heb gevonden, is het volgende:
1. Oplossing in een omgeving met SCSS-stylesheets
npm install bootstrap-sass —save
in Style.SCSS:
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
Note1: de ~teken is een verwijzing naar -modellen_modules map.
Note2: Omdat we SCSS gebruiken, kunnen we alle BoosTrap-variabelen aanpassen die we willen.
2. Oplossing in een omgeving met CSS-stylesheets
npm install bootstrap —save
in Style.CSSS:
@import '~bootstrap/dist/css/bootstrap.css';
Antwoord 8, Autoriteit 5%
Er zijn verschillende manieren om Angular2 te configureren met bootstrap, een van de meest complete manieren om het meeste van het te halen, is om NG-Bootstrap te gebruiken, met behulp van deze configuratie die we geven aan algular2 complete controle over onze DOM, vermijd de noodzaak om te gebruiken JQuery en Boostrap.js.
1-take als startpunt Een nieuw project gemaakt met Angular-CLI en installeer de opdrachtregel, installeer NG-Bootstrap:
npm install @ng-bootstrap/ng-bootstrap --save
Opmerking: meer info op https://ng-bootstrap.github.io/# / Aan de slag
2-dan moeten we Bootstrap installeren voor de CSS en het roostersysteem.
npm install [email protected] --save
Opmerking: meer info op https://getbootstrap.com/docs/4.0/ Aanzetten / downloaden /
Nu hebben we de opstelling van de omgeving en daarvoor moeten we de .gular-cli.json wijzigen die bijdraagt aan de stijl:
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
Hier is een voorbeeld:
"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"
}
}
]
De volgende stap is om de NG-BoosTRAP-module aan ons project toe te voegen, om dit te doen, we moeten toevoegen aan de app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
Voeg vervolgens de nieuwe module toe aan de applicatie-app: ngbmodule.forroot ()
Voorbeeld:
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
Nu kunnen we beginnen met het gebruik van bootstrap4 op ons angular2 / 5-project.
Antwoord 9, Autoriteit 3%
Ik had dezelfde vraag en vond dit artikel met een echt schone oplossing:
http://leon.radley.se/ 2017/01 / hoek-cli-en-bootstrap-4 /
Hier zijn de instructies, maar met mijn vereenvoudigde oplossing:
Installeer Bootstrap 4 (instructies ):
npm install --save [email protected]
Renderen indien nodig, hernoem je SRC / Styles.css naar Styles.scss en update .gular-cli.json om de verandering weer te geven :
"styles": [
"styles.scss"
],
Voeg vervolgens deze regel toe aan Styles.Scss :
@import '~bootstrap/scss/bootstrap';
Antwoord 10, Autoriteit 3%
Controleer gewoon het bestand van uw pakket.json en voeg afhankelijkheden toe voor bootstrap
"dependencies": {
"bootstrap": "^3.3.7",
}
Voeg vervolgens de onderstaande code toe op .angular-cli.jsonbestand
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Ten slotte upd u uw NPM lokaal met behulp van terminal
$ npm update
Antwoord 11, Autoriteit 2%
- NPM installeren –Save bootstrap
-
Ga naar – & GT; Angular-Cli.json -bestand, vind stijleneigenschappen en voeg gewoon volgende angel toe: “../node_modules/bootstrap/dist/css/bootstrap.min.css”, het is misschien als volgt uit:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
Antwoord 12, Autoriteit 2%
Procedure met hoek 6+ & amp; Bootstrap 4+:
- Open een shell op de map van uw project
- Installeer bootstrap met de opdracht:
npm install --save [email protected] - Bootstrap hebben de vecht van de afhankelijkheid nodig, dus als je het niet hebt, kun je het installeren met de opdracht:
npm install --save jquery 1.9.1 - Mogelijk moet u beveiligingslek met de opdracht herstellen:
npm audit fix - Voeg in uw Main Style.SCSS-bestand de volgende regel toe:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
of
Voeg deze regel toe aan je hoofdindex.html-bestand: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Antwoord 13
Ik was op zoek naar hetzelfde antwoord en uiteindelijk vond ik deze link. U kunt drie verschillende manieren vinden om bootstrap css toe te voegen aan uw angular 2-project. Het heeft me geholpen.
Hier is de link: http://codingthesmartway.com/using-bootstrap-with -hoekig/
Antwoord 14
Mijn aanbeveling zou zijn in plaats van het in de json-stylus te declareren om het in de scss te plaatsen, zodat alles op één plek wordt gecompileerd.
1)installeer bootstrap met npm
npm install bootstrap
2) Verklaar bootstrap npm in de css met onze stijlen
Maak _bootstrap-custom.scss:
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.
3) Binnen de stijlen.scss voegen we
@import "bootstrap-custom";
dus we hebben al onze kernen gecompileerd en op één plek
Antwoord 15
Je kunt proberen de Prettyfox UI-bibliotheek http://ng.prettyfox.org
te gebruiken
Deze bibliotheek gebruikt bootstrap 4-stijlen en heeft geen jQuery nodig.
Antwoord 16
voeg de volgende regels toe aan uw html-pagina
<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">
Antwoord 17
Als je angular cli gebruikt, hoef je alleen maar boostrap.min.css toe te voegen aan de sectie “stijlen” van .angular-cli.json nadat je bootstrap aan package.json hebt toegevoegd en het pakket hebt geïnstalleerd.
Eén belangrijk ding is: “Als u wijzigingen aanbrengt in .angular-cli.json, moet u de service opnieuw starten om configuratiewijzigingen op te pikken.”
Ref:
https://github.com/angular/angular-cli /wiki/stories-include-bootstrap
Antwoord 18
Een ander zeer goed alternatief is het gebruik van het skelet Angular 2/4 + Bootstrap 4
1) ZIP downloaden en zip-map uitpakken
2) serveren
Antwoord 19
Voeg dit toe aan uw package.json , “dependency”
“bootstrap”: “^3.3.7”,
In .angular-cli.json-bestand, aan uw “Styles” toevoegen
"../node_modules/bootstrap/dist/css/bootstrap.css"
werk uw npm bij met deze opdracht
npm-update
Antwoord 20
Wanneer u het angular-project uitvoert met angular_CLI of met Visual Studio 2019, downloadt of kopieert de angular_CLI op basis van het bestand package.json bestanden naar de map node_modules. Dus bootstrap en JQuery bestaan ook in die map, dus het is niet nodig om ze opnieuw te installeren.
Je kunt ze op deze manier gebruiken:
- in angular.json-bestand:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Merk op dat aangezien de map node_modulesen het bestand angular.jsonzich in de dezelfde mapbevinden, we “./”
- in het bestand src/styles.css:
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
In dit bestand merk je op dat, aangezien node_modulesde bovenstaande map van het bestand styles.cssis, we “../”
moeten gebruiken
Ik heb deze aanpak gebruikt in Angular 11.0.1, ASP.NET CORE 5, Visual Studio 2019