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