Ako používať Bootstrap v projekte Angular?

Začínam svoju prvú Angular aplikáciu a moja základná konfigurácia je hotová.

Ako môžem pridať Bootstrap do mojej aplikácie?

Ak môžete uviesť príklad, potom by to bola veľká pomoc.

Odpoveď č. 1

Ak používate Angular-CLI na generovanie nových projektov, existuje ďalší spôsob, ako sprístupniť bootstrap v Angular 2/4.

  1. Pomocou rozhrania príkazového riadku prejdite do zložky projektu. Potom použite npm na inštaláciu bootstrapu:
    $ npm install --save bootstrap. Možnosť --save spôsobí, že sa bootstrap zobrazí medzi závislosťami.
  2. Upravte súbor .angular-cli.json, ktorý konfiguruje váš projekt. Nachádza sa v adresári projektu. Pridajte odkaz do poľa "styles". Odkaz musí byť relatívna cesta k bootstrap súboru stiahnutému pomocou npm. V mojom prípade je to: "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Môj príklad .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": {}
  }
}

Teraz by mal byť bootstrap súčasťou vašich predvolených nastavení.

Odpoveď č. 2

Integrácia s Angular2 je k dispozícii aj prostredníctvom projektu ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap.

Ak ho chcete nainštalovať, jednoducho umiestnite tieto súbory do svojej hlavnej HTML stránky:

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

Potom ho môžete použiť vo svojich komponentoch týmto spôsobom:

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

Odpoveď č. 3

Všetko, čo potrebujete urobiť, je zahrnúť Bootstrap CSS do vášho súboru index.html.

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

Odpoveď č. 4

Ďalšou veľmi dobrou (lepšou?) alternatívou je použiť sadu widgetov vytvorených tímom angular-ui: https://ng-bootstrap.github.io

Odpoveď č. 5

Ak plánujete používať Bootstrap 4, ktorý je požadovaný s ng-bootstrap tímu angular-ui, ktorý je spomenutý v tejto diskusii, budete chcieť použiť toto namiesto toho (POZNÁMKA: nemusíte zahrňovať JS súbor):

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

Na toto môžete tiež odkazovať lokálne po spustení npm install [email --save tým, že nasmerujete na súbor vo vašom súbore styles.scss, za predpokladu, že používate SASS:

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

Odpoveď č. 6

Najpopulárnejšou možnosťou je použiť niektorú knižnicu tretích strán distribuovanú ako npm balík, napríklad projekt ng2-bootstrap https://github.com/valor-software/ng2-bootstrap alebo knižnicu Angular UI Bootstrap.

Osobne používam ng2-bootstrap. Existuje mnoho spôsobov, ako ho nakonfigurovať, pretože konfigurácia závisí od toho, ako je váš projekt Angular zostavený. Nižšie uvádzam príklad konfigurácie založenej na projekte Angular 2 QuickStart https://github.com/angular/quickstart

Najprv pridáme závislosti do nášho súboru 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"
  },
... }

Potom musíme namapovať mená na správne URL v súbore 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);

Musíme importovať súbor bootstrap .css do index.html. Môžeme ho získať z priečinka /node_modules/bootstrap na našom pevnom disku (pretože sme pridali závislosť bootstrap 3.3.7) alebo z webu. Tu ho získavame z webu:

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

Mali by sme upraviť náš súbor app.module.ts z priečinka /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 { }

A nakoniec náš súbor app.component.ts zo zložky /app

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

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

export class AppComponent {

    constructor() { }

}

Potom musíme nainštalovať naše závislosti bootstrap a ng2-bootstrap, skôr než spustíme našu aplikáciu. Mali by sme ísť do nášho projektového adresára a zadať

npm install

Nakoniec môžeme spustiť našu aplikáciu

npm start

Na projekte ng2-bootstrap na GitHube je veľa ukážok kódu, ktoré ukazujú, ako importovať ng2-bootstrap do rôznych zostavení projektov Angular 2. Existuje dokonca aj príklad plnkr. Na webovej stránke Valor-software (autorov knižnice) je tiež dokumentácia API.

Súvisiace články