The Round

合同会社ナイツオの開発ブログ

静岡でGo言語やりたい人!!→こちら

AngularUIってどんなもの?

どうもマツウラです。
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、VimTextMateなどと良く似ているもののようです。
  • 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

サポートするテキストエディタ向けのプラグインがあります。

この2つが用意されているので両エディタを使っている方はバリバリ使わせて頂きましょう。