Mad IT: Angular factory

คราวที่แล้วเราสร้าง service ไปแล้ว คราวนี้จะมาดูกันว่านอกจาก service แล้ว เราสามารถเขียนเป็น factory ก็ได้เหมือนกัน

app.js

var app = angular.module('A05', []);

app.factory('CalculatorFactory', function() {
 var currency = 'US$';

 function resultWithCurrency(value) {
  return currency + ' ' + value;
 }

 return {
  name: 'Calculator Factory',
  calculate: function(value) {
   return resultWithCurrency(value * value);
  }
 }
});

app.controller('FactoryController', function($scope, CalculatorFactory) {
 $scope.name = CalculatorFactory.name;
 $scope.calculate = function() {
  console.log(CalculatorFactory.calculate(10));
 }
});

คราวที่แล้วเราเขียน function เดียวกันแต่ใช้ผ่าน service ซึ่งไม่มีการ return อะไร แต่ว่าผูกค่าหรือ function ไว้กับ this แต่ถ้าเป็น factory จะมีการ return ค่า

file.html

<!DOCTYPE html>
<html ng-app="A05">
<head>
 <title>05</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8" ></script>
 <script src="app/05/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-controller="ConstantController">
 <p><b>Constant</b>: {{ viewPath }}</p>
</div>
<hr>

<div ng-controller="FactoryController">
 <p><b>Factory</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

แต่ตอนที่เรียกใช้ ไม่ว่าจะเป็น service หรือ controller จะเรียกไม่ต่างกัน

จบ.

Reference:
AngularJS: Service vs provider vs factory

Mad IT

Angular factory

No comments:

Post a Comment