Twitter Bootstrapを使うと、それっぽいデザインを実現することができて便利ですよね。
今回はAngularJSとBootstrapを組み合わせて使う方法について解説したいと思います。

Bootstrap

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

yeomanを使ったAngularJSプロジェクトの始め方

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です。

http://angular-ui.github.io/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>

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

Bootstrap

UI Bootstrap