注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m
どうもマツウラです。
AngularJSでUIを扱うために何か良いものがないか！？ということでAngularUIについてサラッと調べてみました。
AngularUIはAngularJSのコンパニオンスイートです。
名前の通り、UIに関するさまざまな機能を提供してくれます。
AngularUIは単にプロジェクト名です。
実際の機能を持っているのは下記にある個々のパッケージです。
UI-Utils
外部依存関係を持たないユーティリティ・パッケージ。
以下のモジュールはUI-Utilsに含まれますが、独立しているので個々に使うことができます。
- IE Shiv
カスタムエレメント（<ng-view></ng-view>とかですね。）をサポートしていないIEをサポートする。 - Event Binder
AngularJSでサポートされてない任意のイベントをバインディング。\$eventと\$paramsを渡せます。 - Format
文字列内のトークンを置き換える。国際化のためのモジュールのようです。 - Highlight
ブロック内のテキストの一部をハイライトする。 - Indeterminate checkbox
チェックボックスをindeterminate状態に切り替えるための簡単な方法を提供してくれます。 - Infrector
文字列を別フォーマットに変換します。 - jQuery passthrough
要素で指定したjQuery関数、またはプラグインを呼びます。
シンプルなjQueryプラグインならば、AngularJSのために新しくdirectiveを作成せずに、このdirectiveを使いましょう。 - Keypress
特定のキーにイベントをバインドします。 - Mask
クレジットカードや、電話番号などの入力に対して文字列パターンを設定することができます。
電話番号の入力ならば数字以外はダメ。などですね。 - Reset
input要素の入力値を初期化するリンクやボタンを追加します。
ボタン、リンクをクリックすると設定した初期値にinputボックスの値が変更されるようです。
（サイトのサンプルはHTMLミスってるのかボタン、リンクが表示されてません。） - Route checking
現在のルートと一致するか否かbool値を持つことができます。
パスに応じて動作する機能を追加することができるようになりますね。 - Scrollfix
- Show, Hide, and Toggle Alternative
display:block/noneの代わりにui-show/ui-hideクラスを要素に追加します。
これにより複雑なdirective無しにCSSの厳密な制御を可能にします。 - Unique
指定したキーをチェックすることで、配列から重複するアイテムをすべて除きます。 - Validate
カスタムvalidatorを作成することが簡単にできます。
jQuery passthroughは便利じゃないでしょうか。
jQueryプラグインを使いたくて悩む人が多いようですし、AngularJSコード内にjQueryコードが混在することを防ぐことも出来そうです。
（とはいえ、複雑なプラグインは無理そう・・・。）
UI-Modules
外部依存関係を持つ独立したAngularUIモジュール。
外部のライブラリをAngularJSのUIとして取り組んでる系がこれです。
- CodeMirror IDE
このディレクティブは、textareaにCodeMirrorを追加できます。 CodeMirrorはjavascriptで実装されたブラウザ用の汎用テキストエディタです。 - Ace IDE
このディレクティブは、ACEエディタを追加できます。 ACEはコードエディタです。
Sublime text、Vim、TextMateなどと良く似ているもののようです。 - Calender
ArshawのFullCalendarのためのAngularJS directiveラッパーです。
FullCalendarはjQueryプラグインであり、フルサイズでdrag&drop操作が可能なカレンダーです。 - Google Maps
言わずと知れたGoogle Maps。そのためのdirectiveです。 - Date
このディレクティブを使用すると、フォーム要素に日付ピッカーを追加できます。 - Select2
セレクトボックスを強化するselect2ライブラリを導入するdirectiveです。 - TinyMCE
フォームにWYSIWYGエディタであるtinyMCEを追加します。 - Sortable
drag&dropにより配列をソートすることが可能になります。
UI-Alias
サードパーティ製のディレクティブ名を変更したり、シンプルなテンプレートディレクティブを生成する。
ui-*,bs-*などの接頭辞でHTMLがキタナイ！- 何度も同じディレクティブのセットを呼び出してる！
このような問題をエイリアスとすることで解決してくれます。
UI-Bootstrap
AngularJSによって書かれたBootstrapコンポーネント。
提供されているのは次のとおり。
- Accordion
- Alert
- Buttons
- Carousel
- Collapse
- DatePicker
- TimePicker
- Dropdown Toggle
- Modal
- Pagination
- Popover
- Progressbar
- Rating
- Tabs
- Tooltip
- Typeahead
Date, Time PickerやRating, TypeaheadあたりはUI-Bootstrap独自のものみたいです。
その他はBootstrapでも見かけられます。
ここのコードを読んでみるとdirectiveをどうやって書けばよいのか解ると思います。
AngularJSはまだまだサンプルが少ないので、こういったコードが読めるのは有難いですね。
NG-Grid
AngularJSとjQueryで書かれたデータグリッド。
データ行をレンダリングするための仮想化を利用した高パフォーマンスデータグリッドだそうです。
多数のデータ行を持つ場合に本領発揮するとのこと。(参考)
UI-Router
ネストされたビューの柔軟なルーティングを実現する。
ステートマシンによりインターフェースの一部を整理してくれます。
AngularJSのコアサービスである$routeとは異なり、URLルートを中心とした構成ではありません。
UI-Routerはstatesに基いて整理します。
必要であればルーターやその他の振る舞いを追加することも可能です。
状態は名前、ネスト、並列ビューと結び付けられ、アプリのインターフェースを強力に管理することが出来ます。
http://angular-ui.github.io/ui-router/
ビュー制御が複雑になるほど重宝するハズ。
おまけ：IDE plugins
この２つが用意されているので両エディタを使っている方はバリバリ使わせて頂きましょう。
