業務で安心して使える厳選AngularJSモジュール8選+α

業務で安心して使える厳選AngularJSモジュール8選+α

先生

先生

最近AngularJSとずっとにらめっこしています。やっていて楽しいです。
こんにちは、先生です。

最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。

そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。
2014年11月現在でのライセンスも明記していますので参考にしてください。

安心して使えたモジュール8選

1. Angular directives for Bootstrap

MIT License

Bootstrapをディレクティブにしているモジュールです。
元々のBootstrapにはないDatePickerやTimePickerなどもあり、Bootstrap+αとなっています。

デザインはBootstrapのCSSなので、変更が簡単にできるのが良いところです。
私はboostrap-official-sassをBowerでインストールしたものを@importして使うなどしています。

2. Angular Loading Bar

MIT License

$httpや$resourceでの通信時にローディングを表示してくれるモジュールです。
導入してCSSでスタイリングするだけで組み込むことができます。

またServiceからローディングを制御したり、イベントを利用して任意の処理を追加でおこなうなど、柔軟に対応できるところがとても良いです。

3. Angulartics

MIT License

Google Analyticsの解析を手助けしてくれるモジュールです。

Serviceを用いたページトラッキングはもちろんのこと、Directiveを使ってクリックやスクロールなどのイベントトラッキングを取ることができます。
自前でがっつり作り込む必要がなく、簡単にトラッキングできるので重宝しています。

4. ngTagsInput

MIT License

タグ入力に適したUIを提供してくれるモジュールです。
Directiveを入れてCSSを追加するとUIが実装できます。タグや検索などのUIに活用しています。
bootstrapとセットで使うとデザインが揃わなくなるので、別途CSSを書いて対応します。

5. ui-router

MIT License

ルーティングのモジュールです。オフィシャルのルーターではできないビューの入れ子をサポートするなど、アプリケーション開発で必要なルーティング処理の多くを提供してくれます。
自分の中では、もはやこれがないとルーティングできない、というくらい必須のモジュールになっています。

6. ngStorage

MIT License

ローカルストレージやセッションストレージをServiceとして提供してくれるモジュールです。
地味に便利なのがデフォルトの値を書いておけば簡単に設定できるところで、値がないときは設定した値に、既にあれば無視してくれます。
ifとかごにょごにょしなくていいので見た目もすっきりです。

用途としてはDB保存前の一時的なデータの保持によく使ってます。

7. angular-file-upload

MIT License

クロスブラウザなファイルアップロード機能を提供してくれるモジュールです。
FileAPI非対応なブラウザにはFlashを使うなどして互換性を保ってくれます。
ドラッグ&ドロップでのアップロードにも対応しており、ファイルのアップロードが必要なときなどに使用しています。

8. ngInfiniteScroll

MIT License

スクロールしていくと次のページが自動で読み込まれていく機能を提供するモジュールです。
クリックで次を読み込みとかやりたくない、というときに使用しています。しきい値の設定もディレクティブの属性を使って可能になります。

注目モジュール

おまけとして、これから注目なモジュールを2つ紹介します。枯れ始めた頃に改めて使いたいです。

Angular Material

MIT License

PolymerのPaperElementをディレクティブで、という試みのようです。
現時点ではAndroid4.2系のデフォルトブラウザでレイアウトが崩れているなどの問題があるようですが、まだ出たばかりなので今後に注目です。

Ionic

MIT License

Cordvaなどでモバイルアプリケーションを作るフレームワークでAngular用のモジュールが用意されています。動作が軽快で良いです。
たまたま使おうと思ったときにTextareaがnav-content内にあり、iOSでフォーカスが当たったままスクロールしようとすると、制御できないぐらい怪しい挙動になってしまいました。
UIはシンプルで使いやすい構成なので、こちらも用途に合わせて使うと良いと思います。

また、これとは独立してIoniconsというアイコンフォントが公開されており、こちらはすぐに使えてオススメです。

まとめ

いかがでしたでしょうか。
AngularJS Modulesのランキング上位のもの多いですが、今回の記事では実際に自分で過去に制作したプロダクトに組み込んでリリースしたことのあるモジュールのうち、ハマりどころの少なかったものを厳選して掲載しました。

これからどんどん増えていくであろうAngularJSのモジュールに引き続き注目です。それでは。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など

このメンバーの記事をもっと読む