AngularJSで「サービス」を構築するときの service と factory

こんにちは。ジャンキーなものが食べたい、きたけーです。

AngularJSでは、アプリ内で共通な値やロジックをまとめたものを「サービス」と呼んでいますが、それを定義する service と factory が紛らわしかったのでメモ。

どちらもシングルトンオブジェクト

AngularJSのサービスは基本的にシングルトンオブジェクトで、service、factory で定義したどちらのサービスもシングルトンオブジェクトです。

factoryという名前で、「DIでコントローラに注入されるたびにオブジェクトが生成されるのでは？」とか思っちゃうけどそういうわけではない。

違いは？

factory の場合は、第二引数の関数が返した値をシングルトンオブジェクトとして扱う。(ただの数値とか文字列の場合は value とか const みたいなのもある) service の場合は、第二引数の関数をコンストラクタとして扱って、そのコンストラクタにnew演算子を適用したときに生成したオブジェクトをシングルトンオブジェクトとして扱う。

なので、以下のふたつはおなじ

factory

var app = angular.module('app');
app.factory('Foo', function () {
  var Foo = function () {
    // ...
  };

  return new Foo();
});

service

var app = angular.module('app');
app.service('Foo', function Foo () {
  // ...
});

まとめ

• factory, service どちらもシングルトンオブジェクトを定義する
• newを使いたくない、関数とかオブジェクトリテラル({})で定義したオブジェクトをサービスにしたい場合は factory
• new演算子でコンストラクタから生成したオブジェクトをサービスにしたい場合はservice

参考書籍

AngularJSでサービスを定義するときに、service, factory, provider, value, const といった色々な方法があるが、「こういう場合は○○」といった考え方やフローチャートがまとまっている。

AngularJSリファレンス