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

Dependency Injection (DI) คือ อะไร ?

DI เป็น design pattern รูปแบบหนึ่ง โดยแนวคิดคือ การเอาส่วนที่สัมพันธ์กันมารวมกัน โดยมี injector เป็นตัวเรียกใช้งาน service ให้กับตัว client

(function () {			
	var app = angular.module('someController',[]); //[] ในนี้คือที่เก็บตัวที่เป็น Service
})();

การเรียกใช้ Service

เวลาเราจะเรียกใช้งาน service จำเป็นที่จะต้องสร้างที่เก็บ service

โดยใน AngularJS เรา เรียกว่า Factory

app.factory('ชื่อ Service', function () {
	'use strict';

	return {
		ฟังก์ชั่นA : function () {
			....
		},
		ฟังก์ชั่นB : function () {
			....
		}
	};
});

โดยใน Controller จะต้องเพิ่มพารามิเตอร์เป็นชื่อของ Service เพื่อทำการเรียกใช้ Service

app.controller('someController', function ($scope, someService) {
	$scope.datas = [];

	$scope.datas = someService.getData();
}).
factory('someService', function () {
	return {
		getData: function () {
			// do something and return data
			return ...;
		}
	};
});

สิ่งที่ควรรู้เกี่ยวกับ Factory

เมื่อมีการใช้งาน Service มากกว่า 1 ที่จำไว้เสมอว่า หากมีค่าส่วนใดเปลี่ยน ส่วนอื่นก็จะมีผลกระทบด้วย เนื่องจากใช้ข้อมูลร่วมกัน

สามารถดูตัวอย่างได้จาก Demo

ไฟล์ demoservice.html (HTML)

<!DOCTYPE html>
<html ng-app="application">
<head>
	<meta charset="utf-8">
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<style>.selected{background-color: red;color:white}</style>
</head>
<body>
	<div class="container" style="margin-top:100px">
        <div class="row">
            <div class="col-md-6" ng-controller="example1Controller as example1">
				<form name="form" novalidate>
					<div class="form-group">
					  <label class="col-md-4 control-label" for="textinput">Example 2 Controller</label>  
					  <div class="col-md-8">
					  	<input id="textinput" ng-model="data" name="textinput" type="text" class="form-control input-md" value="{{data}}">
					  	<span class="help-block"></span>  
					  </div>
					</div>
					<!-- Text input-->
					<div class="form-group">
					  <label class="col-md-4 control-label" for="textinput">Data</label>  
					  <div class="col-md-8">
						  {{data}}
					  	<span class="help-block"></span>  
					  </div>
					</div>
					<!-- Button (Double) -->
					<div class="form-group">
					  <label class="col-md-4 control-label" for="button1id">Double Button</label>
					  <div class="col-md-8">
						<button id="button1id" name="button1id" ng-click="get()" class="btn btn-success">GET!!</button>
						<button id="button2id" name="button2id" ng-click="set(data)" class="btn btn-danger">SET!</button>
					  </div>
					</div>
				</form>
			</div>
            <div class="col-md-6" ng-controller="example2Controller as example2">
				<form name="form" novalidate>
					<!-- Text input-->
					<div class="form-group">
					  <label class="col-md-4 control-label" for="textinput">Example 2 Controller</label>  
					  <div class="col-md-8">
					  	<input id="textinput" ng-model="data" name="textinput" type="text" class="form-control input-md" value="{{data}}">
					  	<span class="help-block"></span>  
					  </div>
					</div>
					<!-- Text input-->
					<div class="form-group">
					  <label class="col-md-4 control-label" for="textinput">Data</label>  
					  <div class="col-md-8">
						  {{data}}
					  	<span class="help-block"></span>  
					  </div>
					</div>
					<!-- Button (Double) -->
					<div class="form-group">
					  <label class="col-md-4 control-label" for="button1id">Double Button</label>
					  <div class="col-md-8">
						<button id="button1id" name="button1id" ng-click="get()" class="btn btn-success">GET!!</button>
						<button id="button2id" name="button2id" ng-click="set(data)" class="btn btn-danger">SET!</button>
					  </div>
					</div>
				</form>
			</div>
		</div>
	</div>  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="js/lib/bootstrap.min.js"></script>
    <!-- AngularJS JavaScript -->
    <script src="js/lib/angular.min.js"></script>
    <script src="js/demoservice.js"></script>
</body>
</html>

ไฟล์ demoservice.js (Javascript)

(function (){
	var app = angular.module('application', []);
	app.controller('example1Controller', function ($scope, demoService) {
		$scope.data = demoService.getText();
		$scope.get = function () {
			$scope.data = demoService.getText();
		};
		$scope.set = function (data) {
			demoService.setText(data);
		};
	}).
	controller('example2Controller', function ($scope, demoService) {
		$scope.data = demoService.getText();
		$scope.get = function () {
			$scope.data = demoService.getText();
		};
		$scope.set = function (data) {
			demoService.setText(data);
		};
	}). 
	factory('demoService', function () {
		return {
			text: 'Hello AngularJS Service',
			getText: function () {
				return this.text;
			},
			setText: function (value) {
				this.text = value;
			}
		};
	});
})();