ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

スクラッチ開発も楽しいけれどチームで開発したり引き継いだりすることを考えるとBootstrapを使った方が手離れが良い時もあります。今回AngularJSと合わせてBootstrapを使うためにUI Bootstrapを使ってみたので環境の作り方についてメモしておきます。

UI Bootstrapとは

UI BootstrapはAngularUIチームが開発していて、BootstrapのコンポーネントをAngularJSを使って書き直したものです。Bootstrapはクラスやカスタムデータ属性を使って状態を管理しますがUI Bootstrapはディレクティブを使ってコンポーネントを制御できます。UI Bootstrap独自のコンポーネントもあったりします。

簡単な例ですがBootstrapそのままとUI Bootstrapを使った例がこちらです。

Bootstrap単体で使った場合：

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a href class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">ユーザー <span class="caret"></span></a>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li class="active"><a ui-sref="profile">プロフィール</a></li>
      <li class="divider"></li>
      <li><a href="javascript: logout()">ログアウト</a></li>
    </ul>
  </li>
</ul>

UI Bootstrapを使った場合：

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown" dropdown>
    <a href class="dropdown-toggle" dropdown-toggle>ユーザー <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li ng-class="{ active: $state.includes('profile') }"><a ui-sref="profile">プロフィール</a></li>
      <li class="divider"></li>
      <li><a href ng-click="common.logout()">ログアウト</a></li>
    </ul>
  </li>
</ul>

UI Bootstrapはdropdownやdropdown-toggleディレクティブを使ってコンポーネントを動的に使うことができます。

UI Bootstrapに用意されているディレクティブ

JavaScriptを使っていないBootstrapコンポーネントはそのまま使えますがUI BootstrapでAngularJSで書き換えた16個のディレクティブが用意されています。

• Accordion
• Alert
• Buttons
• Carousel
• Collapse
• Datepicker
• Dropdown
• Modal
• Pagination
• Popover
• Progressbar
• Rating
• Tabs
• Timepicker
• Tooltip
• Typeahead

BootstrapのCSS

UI BootstrapはAngularJSのディレクティブのみでCSSは提供されません。CSSはBootstrapのものをそのまま使います。レイアウトやスタイルはBootstrapのページを参考にします。

UI Bootstrapを使う方法

UI Bootstrap（github）を使うにはBootstrap本体のCSS、フォントとUI BootstrapのJavaScriptファイルが必要です。私の場合はSassをメインで使っているのでBootstrap for SassとUI BootstrapをBower経由で使うことにしました。もちろんすべてダウンロードして使うのもありです。

Bowerの場合はこのコマンドでインストールできます。

• Bootstrap本体：$ bower install bootstrapまたは$ bower install bootstrap-sass
• UI Bootstrap：$ bower install angular-bootstrap

Middlemanを使っている場合はSprocketsを使ってアセットパイプラインのパスを追加しフォントファイルをアセットインポートします。MiddlemanのSperocketsについてはこちらを参考に。

• 初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする
• 初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

各ライブラリの読み込み方法はそれぞれのガイドを確認してください。

類似ライブラリ

UI Bootstrapの他にAngularStrapというライブラリがあります。このライブラリにも同じようにディレクティブが用意されていますが、AngularMotionと合わせて使うことでコンポーネントのアクションをアニメーションさせられるようになります。

今回の紹介はここまで。
もう少し使い込んでみてネタがあれば紹介したいと思います。

シリーズ

1. AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ
2. ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる
3. ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に
4. ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境
5. ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え
6. ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識
7. ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
8. ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す
9. ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す
10. ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
11. ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
12. ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策
13. ウェブデザイナーがはじめるAngularJS：コントローラ間の連携
14. ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap