次のようなHTMLがあったとする。

index.html

<!doctype html>
<html lang="jp" ng-app="App">
<head>
  <meta charset="utf-8">
  <script src="bower_components/angular/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
  Value:{{answer}}
</div>
</body>
</html>

valueとfactoryの違いを考える

valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplusやminusといったサービスがあったとする。

app.js

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; }) //plusサービス
  .value('minus', function(a,b){ return a-b; }) //minusサービス
  .controller('Ctrl',
    ["$scope", "plus", "minus",
      function($scope, plus, minus){
        $scope.answer = minus(plus(3,2),1); // 4
      }
    ]
  );

下記のように、plusとminusを組み合わせたplus_minusというサービスを作りたいが、plus_minus内からplusやminusは参照することができない。

app.js

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; })
  .value('minus', function(a,b){ return a-b; })
  .value('plus_minus',function(a,b,c){
    return minus(plus(a,b),c); // minusやplusが参照できない
  })
  .controller('Ctrl',
    ["$scope", "plus_minus",
      function($scope, plus_minus){
        $scope.answerValue = plus_minus(3,2,1); // エラー
      }
    ]
  );

このように、登録されているサービスを利用するときにfactoryを使う。

app.js

angular.module('App',[])
  .value('plus', function(a,b){ return a+b; })
  .value('minus', function(a,b){ return a-b; })
  .factory('plus_minus', ["plus","minus",function(plus, minus){ // ここで明示的に参照
    return function(a,b,c){
      return minus(plus(a,b),c);
    };
  }])
  .controller('Ctrl',
    ["$scope", "plus_minus",
      function($scope, plus_minus){
        $scope.answer = plus_minus(3,2,1); // 4
      }
    ]
  );

次回はfactoryとserviceの違いを考える。