angular-cliで作ったAngular2プロジェクトにng2-bootstrapを導入する

  • 11
    いいね
  • 0
    コメント

はじめに

Angular2プロジェクトを始めるときは、公式が出しているCLIツール angular-cli

$ ng new {project-name} --style=scss

とかやるとベストプラクティスっぽいひな形を作ってくれて便利です。

--style=scss は scss を使いたい場合のオプションです。指定しなければデフォルトで css になります。
他に sass や less も指定できます。

この方法で作ったプロジェクトに ng2-bootstrap を導入する方法を紹介します。(ほとんど内容ありませんが)

1. ng2-bootstrap, bootstrap, jquery を npm install

$ npm i -S ng2-bootstrap bootstrap jquery

ng2-bootstrap は Bootstrap の機能をディレクティブやコンポーネントの形で提供してくれますが、 Bootstrap の機能自体を導入するには通常どおり bootstrap 本体と jquery が必要です。

こちら にあるように index.html に CDN の URI をベタ書きしても良いのですが、ここでは angular-cli の機能をできるだけ活用するため、bootstrap, jquery とも npm で入れます。

1-2. Datepicker を使いたい場合は moment.js の型定義をインストール

$ npm i -g typings # 最初だけ
$ typings i -S moment

2. angular-cli.json に bootstrap の css, js, および jquery を追加

./angular-cli.json
      "styles": [
+       "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.scss"
      ],
      "scripts": [
+       "../node_modules/jquery/dist/jquery.min.js",
+       "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

3. app.module.ts で ng2-bootstrap を追加

./app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

+ import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent } from './app.component';

// 略

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
+   Ng2BootstrapModule
  ],
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

ではなく

import { AlertModule, ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap';

のように一つずつモジュールを読み込んでも構いませんが、面倒なのでここでは全部まとめて読み込んでくれる Ng2BootstrapModule を使っています。

個別に読み込む場合は、 @NgModule デコレーターの imports: にも全てのモジュールを追加するのを忘れないようにしましょう。

4. あとは使うだけ

以上で準備は完了なので、あとは ドキュメント を参考にしながら ng2-bootstrap を使いこなしましょう。

ちなみに

ng2-bootstrap を使わずに Bootstrap を直接導入する場合は、angular-cli の README 内の例 にあるように、angular-cli.jsonstyles:bootstrap(.min).css を、scripts:jquery(.min).jsbootstrap(.min).js を追加すれば OK です。

この場合、jquery も npm で入れるのが良いでしょう。