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ファイルをインクルードします。
<script src="bower_components/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
最後に依存関係にui.bootstrapを追加します。
angular.module('myapp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap'
])
これで、UI Bootstrapが使えるようになりました。
例えばratingを使いたいのであれば、以下のように書きます。
rateが双方向バインディングされてるので、テキストボックスの値とratingの星の数が連動しますね。
<input type="text" ng-model="rate">
<rating value="rate"></rating>