AngularJS : Service

สิ่งที่ควรรู้

ปกติเมื่อเราพัฒนาเว็บด้วย AngularJS เราจะไม่ใส่ Business Logic ลงไปในหน้าเว็บ กรณีที่มีการ logic ที่ไม่ได้เป็นความลับก็จะใส่ไว้ใน controller ส่วนข้อมูลและ business logic ต่างๆ จะเก็บไว้ประมวลผลหลังบ้าน (Back Office) โดยเรียกใช้ข้อมูลผ่านทาง Service ซึ่งทำหน้าที่เหมือนตัวกลางในการรับส่งข้อมูล

Service คือ อะไร ?

Service เป็น function / object ที่ใช้สำหรับในการแชร์ข้อมูลภายในแต่ละส่วนของ AngularJS เช่น ใน Directive,ใน Controller

ซึ่ง Service มีลักษณะเป็น singleton คือข้อมูลที่อยู่ใน Service จะมีเพียงค่าเดียวตั้งแต่ต้นจนจบ application

โดยในการสร้าง Service ขึ้นมาสามารถทำได้ดังนี้

• service()
• factory()
• provider()

service()

service() จะทำการกำหนด contructor function โดยจะทำการ return instance ของ function มีลักษณะเหมือนการ new object ของ Object Oriented

angular.service('someService', constructor)

factory()

factory() จะทำการกำหนด factory function โดยจะทำการ return ข้อมูลต่างๆ ผ่านทางการเรียกใช้งาน function ที่กำหนดไว้ใน factory

angular.factory('someFactory', function)

provider()

provider() จะทำการกำหนด factory function ที่สามารถทำการตั้งค่าต่างๆให้กับ factory function ผ่านทาง app.config() ได้

angular.provider('someProvider', provider)

ลักษณะการใช้งาน

การใช้งาน service()

ทำการกำหนด Service ชื่อ helloWorldService โดยใช้ service()

โดยการกำหนดฟังก์ชั่น/ตัวแปร ด้วย this เหมือนกับ Object Oriented มีลักษณะดังนี้

angular.service('helloWorldService', function () {
	this.sayHello = function () {
		return "Hello, World From service()";
	};
});

การใช้งาน factory()

ทำการกำหนด Service ชื่อว่า helloWorldFactory โดยใช้ factory()

โดยจะกำหนดฟังก์ชั่นต่างๆในลักษณะของ function reference มีลักษณะดังนี้

angular.factory('helloWorldFactory', function () {
	return {
		sayHello: function () {
			return "Hello, World From factory()"; 
		}
	};
});

การใช้งาน provider()

ทำการกำหนด Service ชื่อว่า helloWorldProvider โดยใช้ provider()

ฟังก์ชั่นที่กำหนดไว้ให้เรียกใช้ใน return ของ $get

โดยเราสามารถกำหนดฟังก์ชั่นที่ทำการกำหนดค่าต่างๆ ใน provider และเรียกใช้ผ่านทาง config() มีลักษณะดังนี้

angular.provider('helloWorld', function () {
	
	this.name = "";
	this.$get = function () {
		var name = this.name;
		return {
			sayHello: function () {
				return "Hello, " + name + " From provider()";
			}
		};
	};
	this.setName = function (name) {
		this.name = name;
	};
})
.config(function (helloWorldProvider) {
	helloWorldProvider.setName("World");
})
.controller('someController', function (helloWorld) {
	alert(helloWorld.sayHello());
});

สามารถดูผลลัพธ์ได้ DEMO

การใช้งาน Service แต่ละแบบนั้นขึ้นอยู่กับสถานะการที่ใช้และความถนัดของแต่ละคน

Service เป็น singleton อย่างไร

เราจะมาทำการทดลองว่า เมื่อมีการกำหนดค่าให้ service แล้วค่านั้นจะยังอยู่ไปเรื่อยๆ ตามแบบ singleton หรือไม่

สร้าง Service ชื่อ singletonService ที่มีฟังก์ชั่น setText(text) และ getText() โดยใช้ service()

angular.module('application', [])				
	.service('singletonService', function () {
		this.text = "First Text";
		this.setText = function (text) {
			this.text = text;
		};
		this.getText = function () {
			return this.text;
		};
	})
	.controller('testSingleton', function ($scope, singletonService) {
		$scope.showText = singletonService.getText();
		$scope.sendText = function (text) {
			singletonService.setText(text);
			$scope.showText = singletonService.getText();
		};
		
		$scope.receiveText = function () {
			$scope.showText = singletonService.getText();
		}
	});

ในไฟล์ html ทำการใส่ข้อความที่แสดง ช่องกรองข้อความ และปุ่มที่ทำการอัพเดทข้อมูล

<div ng-controller="testSingleton as demo1">
	<h3>text From singletonService is : [ {{ showText }} ]</h3>
	<input type="text" ng-model="updateText">
	<button ng-click="sendText(updateText)">Set</button>
	<button ng-click="receiveText()">Get</button>
</div>
<div ng-controller="testSingleton as demo2">
	<h3>text From singletonService is : [ {{ showText }} ]</h3>
	<input type="text" ng-model="updateText">
	<button ng-click="sendText(updateText)">Set</button>
	<button ng-click="receiveText()">Get</button>
</div>

จะได้ผลลัพธ์ดังนี้ DEMO