angularagility

angularjs

Angularで入力フォームを作るならAngularAgilityを使おう！

今回はAngularJSとそのライブラリであるAngularAgilityです。

AngularAgilityとは

https://github.com/AngularAgility/AngularAgility

一言で言うとフォームの拡張のためのライブラリです。簡単にリッチなフォームが作れます。これを使うと例えば以下のようなことができます。

  • 通常divなどを使って4, 5行かかる入力項目が1行で書ける
  • 設定に従って自動で入力チェックをしてくれる
  • 入力チェック違反が１つでもあると次のページに遷移できないようにできる

デモ

百聞は一見にしかずと言いますし、幸いAngularAgilityはかなり丁寧なデモサイトを用意しているのでここを見るのが良いですね。

http://angularagility.herokuapp.com/#/formExtensions/formExtensions/basic

各入力項目で変な値を入れると警告されると思います。例えば必須の*が付いているのに入力しなかったり、email形式なのに@で区切られていなかったり。

最後にSaveボタンがありますが、これを押したときNGなフォームがあると警告して先に進ませてくれませんね。これもまた凄い・・・。

どのくらいHTMLが少なくなるかは上記のデモサイトに書いてあります。（一応リンクも用意しておきます。before, after beforeはdivの嵐ですが、afterはすっきりしていますね)

解説

使い方は簡単で、デモを見れば分かりますが、日本語の情報が少ないので一応解説しておきます。

また、最小限のサンプルも用意しておきました。(特にHTMLと実行結果を見ると良いと思います)

以下の手順で導入できます。

  1. Angularアプリのひな形を作る
  2. AngularAgilityのjsファイルをbowerでインストールするか、ローカルにDLし、scriptタグで利用する。 ※CDNは無いようです。上記のサンプルはrawgitから持ってきていますが、行儀が悪いので真似しない方が良いです
  3. モジュールに”aa.formExtensions”と”aa.notify”を追加する
  4. サンプルの通りCSSを用意する
  5. サンプルのHTMLの通り、aa-notifyディレクティブを持つdivを用意する
  6. サンプルのHTMLの通り、ng-formディレクティブを持つdiv内にaa-field-groupディレクティブを持つinputを書いていく
  7. (オプション) フォームの形を整えたいときはTwitter Bootstrapのcssを入れる

以上です。

CSSは無くても動きますが、無いとエラー時に赤くなりません。

aa-notifyはエラー時に右下にポップアップするメッセージ通知のためのものなので、これが無いとポップアップメッセージが出ません。

aa-field-groupはAngularAgilityの主要なディレクティブと言っても良いほど重要なものです。これがあると単なるinputが５行くらいのdivで囲まれた部品に分解され、奇麗に描画されます。

問題

非常に便利なAngularAgilityですが、このままでは微妙な点がいくつかあります。

例えば、入力ボックスにラベルが付いていますが英語になっています。これはaa-field-groupで指定した変数名が元になっています。この辺りとか自由に変えたいです。

他にもエラー時に表示されるメッセージが英語になっています。このメッセージはAngularAgility内部で固定で持っています。この辺りも自由に変えたいです。

このあたりは次回解説して行きたいと思います。