Hur använder man Bootstrap i ett Angular-projekt?

Jag börjar min första Angular-applikation och min grundläggande inställning är klar.

Hur kan jag lägga till Bootstrap i min applikation?

Om du kan ge ett exempel skulle det vara till stor hjälp.

Svar #1

Förutsatt att du använder Angular-CLI för att skapa nya projekt, finns det ett annat sätt att göra bootstrap åtkomligt i Angular 2/4.

  1. Via kommandoradsgränssnittet, navigera till projektmappen. Använd sedan npm för att installera bootstrap:
    $ npm install --save bootstrap. --save-alternativet kommer att göra att bootstrap dyker upp i beroenden.
  2. Redigera .angular-cli.json-filen, som konfigurerar ditt projekt. Den finns i projektkatalogen. Lägg till en referens till "styles"-arrayen. Referensen måste vara den relativa sökvägen till bootstrap-filen som laddats ner med npm. I mitt fall är det: "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Mitt exempel .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 bör bootstrap vara en del av dina standardinställningar.

Svar #2

En integration med Angular2 är också tillgänglig via ng2-bootstrap-projektet: https://github.com/valor-software/ng2-bootstrap.

För att installera det, placera helt enkelt dessa filer i din huvudsakliga HTML-sida:

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

Då kan du använda det i dina komponenter på detta sätt:

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

Svar #3

Allt du behöver göra är att inkludera bootstrap CSS i din index.html-fil.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Svar #4

Ett annat mycket bra (bättre?) alternativ är att använda ett set med widgets skapade av angular-ui-teamet: https://ng-bootstrap.github.io

Svar #5

Om du planerar att använda Bootstrap 4, vilket krävs med angular-ui-teamets ng-bootstrap som nämns i denna tråd, vill du använda detta istället (OBS: du behöver inte inkludera JS-filen):

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

Du kan också referera till detta lokalt efter att ha kört npm install [email --spara genom att peka på filen i din styles.scss-fil, förutsatt att du använder SASS:

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';

Svar #6

Det mest populära alternativet är att använda något tredjepartsbibliotek som distribueras som ett npm-paket, till exempel ng2-bootstrap-projektet https://github.com/valor-software/ng2-bootstrap eller Angular UI Bootstrap-biblioteket.

Jag använder personligen ng2-bootstrap. Det finns många sätt att konfigurera det på, eftersom konfigurationen beror på hur ditt Angular-projekt är byggt. Nedan lägger jag upp ett exempel på konfiguration baserat på Angular 2 QuickStart-projektet https://github.com/angular/quickstart

Först lägger vi till beroenden i vår 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"
  },
... }

Då måste vi mappa namn till korrekta URL:er i 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);

Vi måste importera bootstrap .css-filen i index.html. Vi kan hämta den från /node_modules/bootstrap-katalogen på vår hårddisk (eftersom vi lade till bootstrap 3.3.7 beroendet) eller från webben. Här hämtar vi den från webben:

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

Vi bör redigera vår app.module.ts-fil från /app-katalogen

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

Och slutligen vår app.component.ts-fil från /app-katalogen

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Då måste vi installera våra bootstrap- och ng2-bootstrap-beroenden innan vi kör vår app. Vi bör gå till vår projektmapp och skriva

npm install

Äntligen kan vi starta vår app

npm start

Det finns många kodexempel på ng2-bootstrap-projektets GitHub som visar hur man importerar ng2-bootstrap till olika Angular 2-projektbyggen. Det finns till och med ett plnkr-exempel. Det finns också API-dokumentation på Valor-softwares (författarna till biblioteket) webbplats.

Relaterade artiklar