Edited at

AngularJSとTwitter Bootstrapを組み合わせて使う

More than 5 years have passed since last update.

Twitter Bootstrapを使うと、それっぽいデザインを実現することができて便利ですよね。

今回はAngularJSとBootstrapを組み合わせて使う方法について解説したいと思います。


Bootstrap

まず、AnuglarJSとBootstrapを組み合わせて使う最も簡単な方法は、yeomanでプロジェクトのひな形を生成することです。

yoコマンドを実行した時に、以下のように質問されます。

[?] Would you like to include Twitter Bootstrap? (Y/n) 

[?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n)

1つ目の質問にYesと答えるとひな形にBootstrapが組み込まれます。

2つ目の質問にYesと答えるとsass-bootstrapというフレームワークがbowerでインストールされ、scssファイルからcssにコンパイルされるようになります。Noだとbootstrap.cssとアイコン用のフォントがダウンロードされます。

この方法でもいいんですが、2つ目の質問にNoで答えた場合、Bootstrapがbowerで管理されてないのでバージョンアップ時の対応が面倒だったり、bootstrap-theme.css(フラットデザインじゃないテーマ)が含まれてなかったりします。

なので、bowerでBootstrapを入れるのもよいと思います。

bower install bootstrap --save


UI Bootstrap

Bootstrapには多くのコンポーネントが用意されていますが、それらのコンポーネントで何らかの動きを起こすときにはJavaScriptでコードを書くことになります。

例えばpopoverを表示するには$('#element').popover('show')とかやったりします。

しかし、このようにjQueryでDOM操作するのは、AngularJSのポリシーに反しています。

そこで、BootstrapのコンポーネントをDirective化し、AngularJSのバインディングで扱えるようにしたのがAngular UIのUI Bootstrapです。

似たものとしてAngularStrapというのもありますが、UI Bootstrapのほうが若干対応コンポーネントが多いのと、Angular UIチームが作っているという安心感があります。

早速bowerでインストールして使いましょう。

bower上にはangular-ui-bootstrapとangular-ui-bootstrap-bowerという3つのパッケージがあるようです。angular-ui-bootstrapはソースコードのみなので、angular-ui-bootstrap-bowerをインストールします。

yeomanで生成したプロジェクトのルートディレクトリで以下のコマンドを実行します。

bower install angular-ui-bootstrap-bower --save

以下のように4つのjsファイルがありますが、tplsが付いているのはjsファイル内にテンプレートが含まれているもの、minが付いているのはminifyされたものになります。通常はtpls付きのものでよいと思います。


  • ui-bootstrap.js

  • ui-bootstrap-tpls.js

  • ui-bootstrap.min.js

  • ui-bootstrap-tpls.min.js

UI Bootstrapを使うには、HTMLから以下のようにjsファイルをインクルードします。


app/index.html

<script src="bower_components/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>


最後に依存関係にui.bootstrapを追加します。


app/scripts/app.js

angular.module('myapp', [

'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap'
])

これで、UI Bootstrapが使えるようになりました。

例えばratingを使いたいのであれば、以下のように書きます。

rateが双方向バインディングされてるので、テキストボックスの値とratingの星の数が連動しますね。

<input type="text" ng-model="rate">

<rating value="rate"></rating>