LoginSignup
33
35

More than 5 years have passed since last update.

個人的に便利なAngularJSモジュール

Last updated at Posted at 2015-10-03

angular-bootstrap (https://angular-ui.github.io/bootstrap/)
いつも取り敢えずコレを入れて、足りないものを探したり作ったり補っていく感じ。ModalとかPopupとかDropdownはやっぱ外せない。

ルーター

ui-router(https://github.com/angular-ui/ui-router)
ngRouteの代替。機能充実。ビューをネストできたり他へ飛ぶ時に気軽にオブジェクトを渡せるのがつよい。

Restful

いちいちServiceを書く手間が省ける。
今はRestangular使ってます。ngResouceは結局URLひとつに付き一つServiceを作らなきゃいけないのがめんどうですが、Restangularは以下のようにシンプルにチェインさせることができるので、ベースURL一つにサービス一つ用意するだけで良い。

Restangular

Restangular.all('users').getList()
   .then(function(data){
      $scope.users = data;
   });
// GET: /users

$scope.user = data[0];
$scope.user.one('messages', 123).one('from', 123).getList('unread');
// GET: /users/123/messages/123/from/123/unread

今API側も同時進行で作ってるので、個人的にリソースをどうマッピングしたらいいのかの参考にもなりました。

ファイルアップロード

ng-file-upload(https://github.com/danialfarid/ng-file-upload)

AJAX ローディングバー

Angular Loading Bar(http://chieffancypants.github.io/angular-loading-bar/)
カスタマイズ性は低いですが、一度設定するだけでAJAX通信する時に必ず表示してくれる手軽さが良い。
毎度はいらないので自分で実装するというときはangular-spinnerかな。

Alert

なぜangular-bootstrapは浮く奴を標準装備してないんだろう…

Dialog系

ngSweetAlert(http://oitozero.github.io/ngSweetAlert/#/home)
ngDialog(https://github.com/likeastore/ngDialog)
上がデザイン過多(大体浮く)で下がカスタマイズ自由すぎる(使う前に調整が必要)。
ngBootboxは馴染むけど、jQueryも本家bootbox.jsも必要なのが玉に瑕。SweetAlertもそうなので純Angularで行きたいならngDialogか。

Pop系 (ブロックしないやつ)

どちらもtoastrの移植。
https://github.com/jirikavi/AngularJS-Toaster (jQuery必要)
http://foxandxss.github.io/angular-toastr/ (純正)
何か融通が効かなくて古株の上をつかっているけど、下は活発に更新されてるようなので期待。

チェックボックス

Checklist Model (http://vitalets.github.io/checklist-model/)
チェックボックスのチェックされてるやつを配列にしてくれたりオブジェクトを配列にしてくれたり。かゆいところに手が届く。

マルチセレクト

AngularJS Dropdown Multiselect
(http://dotansimha.github.io/angularjs-dropdown-multiselect/)
かゆいところに手が届く2。もう一つ有名な方は微妙に扱いづらかった為。ngDisabledに対応してない等不便があると思ったが、pull-requestの中に良いパッチをコミットしてくれてる人がいる。
あとソースコードがそんなに複雑でないので、自分で簡単に機能も追加できた。

モジュールやライブラリのLazyLoad

ocLazyLoad (https://oclazyload.readme.io/)
SPAの難点は最初の読み込みがどうしても重いこと。特定のモジュールやライブラリは一瞬しか使わないのに……という時に、読み込ませたいタイミングで読み込ませられるモジュール。大工事にはなるかもですが、パフォーマンスを見直したい時に。ServiceもDirectiveもあります。

スクロール

ngInfiniteScroll (http://sroze.github.io/ngInfiniteScroll/demos.html)
永久スクロールできるやつ

ngSmoothScroll (https://github.com/d-oliveros/ngSmoothScroll)
アンカー先スクロールできるやつ

おまけ

http://ngmodules.org/ ここで人気順に見るのも良い。今見たらだいたいあった。
Token based Authを実装したときhttp-auth-interceptorにはお世話になりました。

33
35
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
35