Mad IT: Angular service

คราวที่แล้วเราเริ่มต้นด้วย module กับ controller ไปแล้ว ถ้าเราจะเขียนให้สวยก็เขียนใส่ service หรือ factory สำหรับการเรียกใช้ในหลายๆ controller (คิดว่าน่าจะเหมือนกับ MVC)

ตัวอย่างการเขียน service และการเรียกใช้ผ่าน controller

app.js

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

app.service('CalculatorService', function() {
 var currency = 'US$';

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

 this.name = 'Calculator Factory';
 this.calculate = function(value) {
  return resultWithCurrency(value * value);
 };
});

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

ใน service เราผูกค่า หรือ function ที่เราต้องใช้ไปกับตัว service เอง (this) แล้วค่อยให้ controller มาเรียกใช้ service ไปอีกที โดยจะต้องผ่านตัวแปร $scope เพื่อให้หน้า client สามารถเห็นค่าเหล่านี้

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="ServiceController">
 <p><b>Service</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

ในหน้าเวป เราก็เรียกใช้ controller เหมือนปกติ

จบ.

Mad IT

Angular service

No comments:

Post a Comment