この素晴らしきフロントエンドに祝福を

アニヲタからフロントエンドエンジニアへ転身した私の備忘録。

angular2入門【Bootstrap導入】

こんにちわ
ゼットンです。

ng-bootstrapの導入

今回は、angular2のプロジェクトにbootstrapを導入してみます。
手順としては

1.npmインストール
2.バンドルの中へ含まれるようにする
3.アプリ内でグローバルに使えるようにする
という感じ。

1. npmインストール

プロジェクトフォルダに移動し、
下記を実行します。

npm install --save ng2-bootstrap

2. バンドルの中へ含まれるようにする (src/app/shared/index.ts)

angular-cliはwebpackによって
自動的に一つのJavascriptファイルに連結されます。
その中にbootstrapが含まれるようにindex.tsに定義します。

import '../../../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js'

3. アプリ内でグローバルに使えるようにする (src/styles.css)

styles.cssに下記の定義を加えることで、 アプリ全体にBootstrapを適応できます。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");