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

การดึงข้อมูลผ่านทาง HTTP

โดยในการที่เราจะให้ Service ดึงข้อมูลมาได้นั้นจำเป็นต้องใช้ $http และ $q

app.factory('someService', function ($http, $q) {
	return {
		getData: function () {...}
	};
});

$http คือ อะไร ?

$http เป็น library ที่ทำมาให้รองรับการเรียกใช้งาน HTTP Request โดยประกอบไปด้วย

  • get()
  • post()
  • delete()
  • head()
  • patch()

ลักษณะการใช้เหมือนใน jQuery

$q คือ อะไร ?

$q เป็น library ที่ไว้ใช้ในการทำงานแบบ On Background / Multitasking

โดยจะมีองค์ประกอบดังนี้

  • defer() กำหนดให้โปรเซสทำงานหลังบ้าน (On Background) โดยจะได้ค่าจากฟังก์ชั่นกลับมา คือ deferred
  • deferred.resolve(data) เมื่อทำงานจนจบโปรเซส ให้ทำการส่งค่าไป โดยใช้ฟังก์ชั่น then() ในการรับ
  • deferred.promise กำหนดให้ทำการรอจนกว่าจะจบโปรเซส
app.controller('someController',['$scope','someService', function ($scope, someService) {
	$scope.datas = [];

	someService.getData().then(function (data) { // รับค่าจาก deferred.resolve(data)
		$scope.datas = data;
	});
}]).				
factory('someService', function ($http, $q) {
	return {
		getData: function () {
			var deferred = $q.defer();//เริ่มทำงาน
				
			$http.get('data.json').success(function (data) {
				deferred.resolve(data);// เสร็จแล้วเอาไปเลย!!
			});
			return deferred.promise; //รอตามสัญญา ขอเวลาอีกไม่นาน
		}
	};
});

Challenge 11: Load Data From Service

คุณทานากะอยากให้ทำการย้ายข้อมูลจากที่เขียนใน Javascript มาอยู่ในไฟล์ JSON เพื่อให้ง่ายต่อการจัดการข้อมูล

โดยข้อมูลทั้งหมดจะถูกเก็บไว้ในนี้ sushi.json

สามารถดูตัวอย่างได้ในลิงค์ Demo

สามารถดูเฉลยได้จาก Demo Javascript

ไฟล์ sushistore.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">
</head>
<body>
	

      
{{"Tanaka" | uppercase}}{{"-San"}}'s Sushi Store

      
Open Since {{10*200}}.

    

    

        

            

				

					
					

						
{{sushi.name}}
							{{sushi.price | number:2}} yen
						

						

						

							
{{sushi.quantity}}

							
							
							
						

					

				

			

		

	
  
    <!-- 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/app.js"></script>
</body>
</html>

ไฟล์ app.js

(function () {
	'use strict';
	
	var app = angular.module('application', []);
	app.controller('storeController', ['$scope', function ($scope) {
		$scope.sushis = [
			{
				name: 'Maguro',
				price: 200,
				description: "Fat Tuna",
				quantity: 0,
				image: '../image/sushi/maguro.jpg'
			},
			{
				name: 'Tamago',
				price: 120,
				description: "Rice With Egg",
				quantity: 0,
				image: '../image/sushi/tamago.jpg'
			},
			{
				name: 'Ebi',
				price: 150,
				description: "Rice With shrimp",
				quantity: 0,
				image: '../image/sushi/ebi.jpg'
			},
			{
				name: 'Tako',
				price: 180,
				description: "Rice With Octopus",
				quantity: 0,
				image: '../image/sushi/tako.jpg'
			}
		];
		$scope.purchase = function (item) {
			if (item.quantity > 0) {
				return true;
			} else {
				return false;
			}
		};
		$scope.clickAdd = function (item) {
			item.quantity += 1;
		};
		$scope.clickRemove = function (item) {
			if (item.quantity > 0) {
				item.quantity -= 1;
				return true;
			} else {
				return false;	
			}
		};
	}]);
	
})();