つかびーの技術日記

情報系修士卒のWeb系技術日記です。現在のフォーカス分野はアドテクです。

AngularJSでカスタムサービスを作成するときの作成法まとめ

      2014/02/21

AngularJSでカスタムサービスを作成することは非常に大切です。なぜならビジネスロジックはサービスとして書くべきであり、そのようにプログラミングすることが想定されているからです。(少し自信ありませんが、多分そうです)

カスタムサービスを作成する方法ですが、いくつか選択肢があります。

  • $provide#value メソッド
  • $provide#service メソッド
  • $provide#factory メソッド
  • $provide#decorator メソッド
  • $provide#constant メソッド
  • $provide#provider メソッド

個人的にはserviceメソッドだけ使っていれば事足りるのでいいや、という気もするのですが、できれば使いわけたいです。valueやconstantを使い分けられるとコードの可読性と保守性が上がりそうです。そんな訳でこれらの違いや使い方について自分なりにまとめます。

・・・と思ったら、既に以下の公式ドキュメントや、その翻訳ドキュメントで割といい感じにまとまってました。

参照リンク

公式サイト
Provider – AngularJS
AngularJS Documentation for providers

翻訳資料
$provide | AngularJS 1.2 日本語リファレンス | js STUDIO
プロバイダーについて | AngularJS 1.2 日本語リファレンス | js STUDIO

説明

valueとconstantは名前の通り、値を表現・提供するサービスのようです。複数のコントローラ間で値だけ共有したい、というようなシーンに使うと良いと思います。constantは定数と言いつつ値の変更はできるので、その点が少し気になりました。

valueとconstantの使い分けですが、valueはconfigフェーズ(メソッド)でInjectできませんが、constantはできる、という違いがあります。

例えば上記のコードはconstantレシピのサービスを作成してconfigで利用していますが、これをvalueレシピに変更すると動かなくなります。

providerは全てのメソッドの低レイヤAPIのようなもののようですね。覚えなくても大丈夫でしょう。

decoratorはサービスの新規作成もできますが、既存サービスの拡張という用途のようです。これはよく理解できていません。どんなときに使うんでしょうか・・・。誰か利用ケースを教えてください。

問題はserviceとfactoryですが、この違いも既に参考となるものがありました。

Tea for Coding: [Angular.js]factoryとserviceの使い分けについて
angularjs – angular.service vs angular.factory – Stack Overflow

factoryの場合、returnしたものが公開APIなので、returnしない部分に好きな処理を書ける、という点がserviceと違いますね。これは便利かも?

まとめ

  • グローバルに近い値、複数コントローラで共有した値がある場合
    value, constant
  • configフェーズでInjectして利用したい場合
    constant
  • ステートレスなビジネスロジックを作成したい、またはユーティリティクラスを作成した場合
    service
  • ステートフルなビジネスロジックを作成した場合
    factory

※もちろん新規参入者の学習コストを下げるため、factory統一で行く!とかもありだと思います。一つの指標になれば幸いです。

 - JavaScript