AngularJSとBootstrapを組み合わせたライブラリと言えば、UI Bootstrapが最も有名ですが、UI BootstrapよりもAngularStrapの方が好みです。
というわけで、この記事ではAngularStrapの良いところを紹介します。
AngularJSとAngularStrapについて、それぞれ次のバージョンを対象とします。
- AngularJS: 1.3.6
- AngularStrap: 2.1.4
AngularStrapとは
AngularStrapは、BootstrapのUIコンポーネントをAngularJSのディレクティブで再実装したライブラリです。
重要なポイントは次のもの。
- Bootstrap提供のbootstrap.jsへの依存はない
- jQueryへの依存はない
- AngularJSの依存を除けばBootstrapのCSSに依存しているだけ
ただし、すぐ下で述べますが、AngularStrapの良さをもっと享受するにはAngularMotionというアニメーション用のCSSライブラリと合わせて使うのがオススメです。
アニメーションの適用が簡単
最初に紹介するのはアニメーションについてです。
AngularStrapの一番の強みはアニメーションの適用が簡単なことです。
アニメーション機能の特徴を挙げてみましょう。
- AngularJSのngAnimateモジュールの上に作られた仕組みである
- 要素の属性やプロバイダの設定でCSS classを指定するだけでアニメーションを適用できる
- AngularMotionを使えばUIコンポーネントにデフォルトのアニメーションを適用できる
AngularMotionは、AngularStrapの作者が作ったアニメーション用のCSSライブラリです。単純にCSSだけを提供していて、JavaScriptは提供していません。名前からわかるようにAngularJSと組み合わせて使うことを想定したライブラリで、ngAnimateの規約に則ったCSS classを提供し、基本的なアニメーションを実現できるようにしています。
AngularMotionのサイトをみるとどのようなアニメーションがサポートされているかわかります。
ただし、詳しい説明は特にないので、どんな種類のCSS classがあるのかはLESSの定義をみたほうがわかりやすいです。am-fadeなどam-という接頭辞がついたCSS classの数だけアニメーションの種類があります。
サンプルです。
http://plnkr.co/edit/PlJwr4?p=preview
このサンプルでは次のアニメーションをdata-animation属性を使ってAlertコンポーネントに適用しています。
- am-fade
- am-slide-bottom
- am-fade-and-scale
テンプレートの差し替えが簡単
次に紹介する機能は、テンプレートの差し替え機能です。
AngularStrapのUIコンポーネントはいずれも次の2つの方法のどちらかでテンプレートを差し替えられます。
- プロバイダの設定による一律的な差し替え
- templateオプションの指定によるUIコンポーネントのインスタンスごとの差し替え
些細なデザインの変更であれば、テンプレートを差し替えることなくCSSの修正だけで対応できるのですが、ある程度アプリケーション固有のデザインを入れたい場合はテンプレートの修正は必須と言えます(例: DatePickerのカレンダーの変更)。
そういう意味で、どのUIコンポーネントもテンプレートが簡単に差し替え可能になっている意義は大きいです。
それから、インスタンスごとに差し替えられる方法が提供されていることも重要です。ひとつのアプリケーションの中でデザインだけが異なる同じ種類のUIコンポーネントを混在させられるからです。
サンプルです。
http://plnkr.co/edit/rHFGuu?p=preview
このサンプルでは、テンプレートの差し替えで以下のことを実現しています。
- プロバイダの設定による差し替えで、Alertコンポーネントの閉じるボタンを記号から文字に変更
- div要素のdata-template属性を使った差し替えで、Alertコンポーネントの先頭にアイコンを付与
サービスとしての利用が簡単
最後に紹介するのは、UIコンポーネントのファクトリをサービスとして利用する機能です。
AngularStrapはAPIの設計が秀逸で、ディレクティブとそれに対応するProviderレシピスタイルのサービスが1対1の関係で用意されています。そして、ディレクティブで行うことは最小限にしてほとんどの処理をディレクティブからサービスに委譲するように作られています。
サービスを切り出すことによって次の利点が生まれています。
- プログラマブルにUIコンポーネントを操作できる
- UIコンポーネントのデフォルト設定をProviderで変更できる
- decoratorによりサービスを拡張できる
特に、プログラマブルにUIコンポーネントを操作できるのは重要で、独自のディレクティブの中からAngularStrapのUIコンポーネントを呼び出す、といったことが可能になり、独自ディレクティブ実装の選択肢が広がります。
このあたりの再利用性や拡張性の方針については、UI Bootstrapと方針が大きく異なるところで興味深くもあります。UI Bootstrapは、拡張ポイントをディレクティブのコントローラーを介して提供する方針のようですが、AngularStrapはディレクティブで一切コントローラーを使っていません。
サンプルです。
http://plnkr.co/edit/rZirJc?p=preview
このサンプルでは次のことをしています。
- ng-clickが実行されたらAlertコンポーネントの表示/非表示を制御
- AlertコンポーネントのデフォルトのアニメーションをProviderで変更
- decoratorを使ってAlertコンポーネントへ渡されるcontentを改変
まとめ
AngularStrapの良いところを3つ挙げました。
- アニメーションの適用が簡単
- テンプレートの差し替えが簡単
- サービスとしての利用が簡単
AngularStrapの設計方法は、独自のUIコンポーネントを作るときも参考になると感じています。
今の自分の考えとしては、AngularStrapのUIコンポーネントをラップして活用しつつ、もっとアプリケーションに特化させた独自UIコンポーネントをたくさん作ってみたいなーと思っています。
AngularJSとBootstrapを使う際は、ぜひAngularStrapを検討してみてください。