最近AngularJSとずっとにらめっこしています。やっていて楽しいです。
こんにちは、先生です。
最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。
そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。
2014年11月現在でのライセンスも明記していますので参考にしてください。
安心して使えたモジュール8選
1. Angular directives for Bootstrap
http://angular-ui.github.io/bootstrap/
MIT License
Bootstrapをディレクティブにしているモジュールです。
元々のBootstrapにはないDatePickerやTimePickerなどもあり、Bootstrap＋αとなっています。
デザインはBootstrapのCSSなので、変更が簡単にできるのが良いところです。
私はboostrap-official-sassをBowerでインストールしたものを@importして使うなどしています。
2. Angular Loading Bar
http://chieffancypants.github.io/angular-loading-bar/
MIT License
$httpや$resourceでの通信時にローディングを表示してくれるモジュールです。
導入してCSSでスタイリングするだけで組み込むことができます。
またServiceからローディングを制御したり、イベントを利用して任意の処理を追加でおこなうなど、柔軟に対応できるところがとても良いです。
3. Angulartics
http://luisfarzati.github.io/angulartics/
MIT License
Google Analyticsの解析を手助けしてくれるモジュールです。
Serviceを用いたページトラッキングはもちろんのこと、Directiveを使ってクリックやスクロールなどのイベントトラッキングを取ることができます。
自前でがっつり作り込む必要がなく、簡単にトラッキングできるので重宝しています。
4. ngTagsInput
http://mbenford.github.io/ngTagsInput/
MIT License
タグ入力に適したUIを提供してくれるモジュールです。
Directiveを入れてCSSを追加するとUIが実装できます。タグや検索などのUIに活用しています。
bootstrapとセットで使うとデザインが揃わなくなるので、別途CSSを書いて対応します。
5. ui-router
https://github.com/angular-ui/ui-router
MIT License
ルーティングのモジュールです。オフィシャルのルーターではできないビューの入れ子をサポートするなど、アプリケーション開発で必要なルーティング処理の多くを提供してくれます。
自分の中では、もはやこれがないとルーティングできない、というくらい必須のモジュールになっています。
6. ngStorage
https://github.com/gsklee/ngStorage
MIT License
ローカルストレージやセッションストレージをServiceとして提供してくれるモジュールです。
地味に便利なのがデフォルトの値を書いておけば簡単に設定できるところで、値がないときは設定した値に、既にあれば無視してくれます。
ifとかごにょごにょしなくていいので見た目もすっきりです。
用途としてはDB保存前の一時的なデータの保持によく使ってます。
7. angular-file-upload
https://github.com/danialfarid/angular-file-upload
MIT License
クロスブラウザなファイルアップロード機能を提供してくれるモジュールです。
FileAPI非対応なブラウザにはFlashを使うなどして互換性を保ってくれます。
ドラッグ＆ドロップでのアップロードにも対応しており、ファイルのアップロードが必要なときなどに使用しています。
8. ngInfiniteScroll
http://binarymuse.github.io/ngInfiniteScroll/
MIT License
スクロールしていくと次のページが自動で読み込まれていく機能を提供するモジュールです。
クリックで次を読み込みとかやりたくない、というときに使用しています。しきい値の設定もディレクティブの属性を使って可能になります。
注目モジュール
おまけとして、これから注目なモジュールを2つ紹介します。枯れ始めた頃に改めて使いたいです。
Angular Material
https://material.angularjs.org/#/
MIT License
PolymerのPaperElementをディレクティブで、という試みのようです。
現時点ではAndroid4.2系のデフォルトブラウザでレイアウトが崩れているなどの問題があるようですが、まだ出たばかりなので今後に注目です。
Ionic
MIT License
Cordvaなどでモバイルアプリケーションを作るフレームワークでAngular用のモジュールが用意されています。動作が軽快で良いです。
たまたま使おうと思ったときにTextareaがnav-content内にあり、iOSでフォーカスが当たったままスクロールしようとすると、制御できないぐらい怪しい挙動になってしまいました。
UIはシンプルで使いやすい構成なので、こちらも用途に合わせて使うと良いと思います。
また、これとは独立してIoniconsというアイコンフォントが公開されており、こちらはすぐに使えてオススメです。
まとめ
いかがでしたでしょうか。
AngularJS Modulesのランキング上位のもの多いですが、今回の記事では実際に自分で過去に制作したプロダクトに組み込んでリリースしたことのあるモジュールのうち、ハマりどころの少なかったものを厳選して掲載しました。
これからどんどん増えていくであろうAngularJSのモジュールに引き続き注目です。それでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
