次のようなHTMLがあったとする。
[code language="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> [/code]
valueとfactoryの違いを考える
valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplusやminusといったサービスがあったとする。
[code language="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 } ] ); [/code]
下記のように、plusとminusを組み合わせたplus_minusというサービスを作りたいが、plus_minus内からplusやminusは参照することができない。
[code language="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); // エラー } ] ); [/code]
このように、登録されているサービスを利用するときにfactoryを使う。
[code language="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 } ] ); [/code]
次回は factoryとserviceの違いを考える。
