AngularJSで独自のServiceを定義する($provide#serviceのケース)
2014/02/19
AngularJSを利用してプログラミングを行うとき、Controllerが複数存在した場合、共通の処理をどこに書けばいいのでしょうか。そういうときは独自にServiceを定義してそれをInjectして使いましょう！という話です。
もちろん共通の処理である関数やオブジェクトをグローバルな領域に定義して複数のControllerで利用しても良いです。ですが、AngularJSにはServiceという仕組みが用意されているのでこれを利用しましょう。privateっぽく処理を定義できます。また、仮引数でInjectするServiceを宣言する形式になるため、「このコンテキストではこのサービスを使うよ」ということが明確になります。断言はできませんが可読性は増すと思います。
では実例を示します。
$provide#serviceを利用した独自Serviceのサンプル
JSFiddleに書いてみました。（※正確には$provide#serviceではなくmodule#serviceですが、同じです。）
テキストボックスに入力された商品価格から税込価格を計算するサンプルです。税別価格部分に整数を入力すると自動計算されます。AngularJSのデータバインドは最高ですね。
itemServiceというビジネスロジックとデータ構造を備えたServiceを定義して、２つのControllerでそれを利用しています。
コードが小さいので微妙ですが、グローバル領域に関数やオブジェクトを定義するよりかはこちらの方が可読性が増すかなと思います。
今回は$provide#serviceメソッドを利用してサービスを定義しましたが、$provide#providerメソッドや$provide#factoryを利用しても同様にサービスを定義することができます。それら３つの違いは近いうちにまとめてみようと思います。