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

การพัฒนาโปรแกรมด้วย AngularJS Framework จะใช้โครงสร้างแบบ MVC

Controller คือ อะไร ?

ข้อมูลและฟังก์ชั่นต่างๆ จะถูกกำหนดไว้ใน Controller เพื่อให้ง่ายต่อการกำหนดขอบเขตของข้อมูลและฟังก์ชั่น

ลองเขียน Controller กันเถอะ

เราต้องการสร้างหน้าแสดงผลค่าของข้อมูลที่เอามาจาก Controller

1.สร้าง Controller เริ่มจากในไฟล์ js/app.js ทำการสร้าง Controller ชื่อ storeController โดยมีรายละเอียดดังนี้

(function () {
	'use strict'
	
	var app = angular.module('application', []);
	
	app.controller('storeController', function () {
	});
})();

2.กำหนดตัวแปรเก็บรายละเอียดข้อมูล ทำการกำหนดข้อมูลเพิ่มลงใน storeController โดยจะยกตัวอย่างเป็นข้อมูลซูชิหน้าปลามาคุโร่

app.controller('storeController', function () {
	this.sushi = {
		name: 'Maguro',
		price: 200,
		description: 'Fat tuna'
	};
});

3.กำหนดขอบเขตของ directive ในการที่เราจะเรียกใช้ข้อมูลหรือฟังก์ชั่นต่างๆใน Controller

จะต้องทำการกำหนด Directive ที่ชื่อว่า ng-controller ในไฟล์ sushistore.html เพื่อระบุขอบเขตข้อมูล

ng-controller="ชื่อของ Controller as ชื่อเรียกในส่วนนี้(Alias)"
<body>
	<div class="list-group">					
		<div class="list-group-item" ng-controller="storeController as store">
			<h1>Sushi's Name</h1>
			<h2>Sushi's Price<h2>
			<p>Sushi's Description<p>
		</div>
	</div>
...

จากนั้นใส่ข้อมูลซูชิลงไปให้ใส่ {{}} ครอบข้อมูลไว้ โดยการที่จะเข้าถึงข้อมูลนั้นเราต้องระบุ ชื่อตัวแปร

<body>
	<div class="list-group">					
		<div class="list-group-item" ng-controller="storeController as store">
			<h1>{{store.sushi.name}}</h1>
			<h2>{{store.sushi.price}} yen<h2>
			<p>{{store.sushi.description}}<p>
		</div>
	</div>
...

หากต้องการดูตัวอย่างให้เข้าลิงค์นี้ Demo

ตัวอย่างที่ผิด

ข้อมูลจะไม่สามารถใช้ได้หากประกาศภายนอกของ ng-controller อยู่

<body>
	<div class="list-group">					
		<div class="list-group-item" ng-controller="storeController as store">
			<h1>{{store.sushi.name}}</h1>
			<h2>{{store.sushi.price}} yen</h2>
			<p>{{store.sushi.description}}</p>
		</div>
		{{store.sushi.name}} 
	</div>
...

Challenge 2: The Best Sushi of Sushi Store

ในบรรดาซูชิทั้งหมดที่สุดของซูชิคือ ข้าวปั้นหน้ามาคุโร่ (Maguro)

ซึ่งคุณทานากะอยากให้ใส่เมนูนี้เป็นเมนูเด็ดประจำร้านของตัวเองจึงขอให้คุณทำเพิ่มซูชิให้

โดยคุณทานากะให้หน้าตาเว็บที่เขาอยากได้มีผลลัพธ์ดังลิงนี้ Demo

โดยมีโค้ดให้บางส่วน จงเติมส่วนที่ขาดหายไป เพื่อให้เว็บทำงานได้

ไฟล์ sushistore.html

<!DOCTYPE html>
<html ng-app="application">
<head>
    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
    <header>
      <h1 class="text-center">{{"Tanaka-San"}}'s Sushi Store</h1>
      <h2 class="text-center">Open Since {{10*200}}.</h2>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="list-group">
                    <div class="list-group-item">
                        <h1>Sushi Name</h1>
                        <h2>XXX yen</h2>
                        <p>Sushi Description</p>
                    </div>
                </div>
            </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/app.js"></script>
</body>
</html>

ไฟล์ app.js

(function () {
	'use strict';
	
	var app = angular.module('application', []);
	app.controller('storeController', function () {

	});
	
})();