angular-services - AngularJS factory - angular.service vs angular.factory #2

AngularJS factory / angularjs

Read Question

Arsen Khachaturyan



Answer #2

ここでは、例えばGithubのサービスを紹介します。Githubとどのように会話するかを知っています。urlsやmethodを知っています。これをコントローラに注入すると、プロミスを生成して返してくれます。

(function() {
  var base = "https://api.github.com";

  angular.module('github', [])
    .service('githubService', function( $http ) {
      this.getEvents: function() {
        var url = [
          base,
          '/events',
          '?callback=JSON_CALLBACK'
        ].join('');
        return $http.jsonp(url);
      }
    });
  )();

一方、ファクトリーは、ファクトリーパターンの実装を目的としています。ファクトリーパターンとは、ファクトリー関数を使ってオブジェクトを生成するパターンのことです。一般的には、モデルを構築する際に使用します。ここでは、Authorのコンストラクタを返すファクトリーを紹介します。

angular.module('user', [])
  .factory('User', function($resource) {
    var url = 'http://simple-api.herokuapp.com/api/v1/authors/:id'
    return $resource(url);
  })

これを利用して、次のようにします。

angular.module('app', ['user'])
  .controller('authorController', function($scope, User) {
    $scope.user = new User();
  })

これを説明するために、同じようにサービスとファクトリーを使って作成されたシンプルなオブジェクトを示します。

angular.module('app', [])
  .service('helloService', function() {
    this.sayHello = function() {
      return "Hello!";
    }
  })
  .factory('helloFactory', function() {
    return {
      sayHello: function() {
        return "Hello!";
      }
    }
  });