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

Directive คือ อะไร ?

Directive เป็นการระบุว่า HTML tag นี้จะถูกใช้งานโดย AngularJS ซึ่ง AngularJS ได้แนวคิดมาจาก Web Component ซึ่งเป็นมาตราฐานที่เพิ่มเข้ามาใหม่ใน HTML 5

Module คือ อะไร ?

ส่วนประกอบต่างๆ ของ Application แบ่งออกเป็น Module เพื่อให้ง่ายต่อการจัดการซอฟต์แวร์ ซึ่งจะมี Controller, Service ที่จะนำมาใช้ filter ข้อมูลต่างๆ รวมถึงส่วนของการตั้งค่า Config ต่างๆ โดย Module หนึ่ง สามารถเรียกใช้ Module อื่นๆ ได้

Expression คือ อะไร ?

Expression เป็นส่วนที่เราต้องการเอาข้อมูลเข้ามาใส่ในหน้า html โดยการใช้ Expression โดยใช้ {{ }} ครอบข้อมูลที่ทำการแสดง

เริ่มเขียนโปรแกรมกันเถอะ

ต่อจากบทนี้เป็นต้นไปเราจะยึดตาม path ของไฟล์ดังนี้

tutorial/
├── css/
├── js/
│   └── lib/
├── fonts/
└── helloworld.html

1. เริ่มจากสร้างไฟล์ html ชื่อ helloworld.html ที่โฟลเดอร์ tutorial โดยทำการเรียกใช้ CSS และ Javascript ของ Bootstrap 3 และ AngularJS 

<!DOCTYPE html>
<html>
	<head>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<!-- Bootstrap theme -->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	</head>
	<body>
	<!-- 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>

2. สร้างไฟล์ในโฟลเดอร์ js/ ชื่อ app.js ไฟล์นี้จะเป็นที่เก็บโมดูลของ AngularJS ที่ใช้ทำงานในเว็บหน้านี้ โดยเราจะตั้งชื่อโมดูลว่า application

(function() {
	'use strict';
										
	var app = angular.module('application', []);//ชื่อโมดูล, โมดูลที่เกี่ยวข้อง(จะกล่าวถึงในภายหลัง) 
})(); // Best Practice For Javascript

ในการที่เราจะเรียกใช้ Module ได้นั้นจะต้องทำการกำหนด Directive ที่ชื่อว่า ng-app ในไฟล์ helloworld.html เพื่อให้ AngularJS เข้ามาทำงานในส่วนนั้นได้

ng-app="ชื่อ Module"
				<!DOCTYPE html>
				<html ng-app="application"><-- ng-app="ชื่อของmodule" -->
					<head>
3.ในไฟล์ helloworld.html ลองเขียน Expression โดยพิมพ์ตามข้อมูลด้านซ้าย เวลาเรียกแสดงผลบนหน้าเว็บจะได้ผลลัพธ์ทางด้านขวา 
<body>
	<p>
	{{"Hello," + "AngularJS"}}
	</p>
	<p>
		Number is {{2 + 2}}
	</p>
</body>
<body>
	<p>
		Hello,AngularJS
	</p>
	<p>
		Number is 4
	</p>
</body>

หมายเหตุ: หากยังมี {{ }} อยู่ในหน้าแสดงผล แสดงว่ามีบางอย่างใน Javascript ของคุณผิดพลาด

Challenge 1: Tanaka-San's Sushi Store

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

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

ให้ทำการตั้งชื่อไฟล์ใหม่ชื่อ sushistore.html

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

<!DOCTYPE html>
<html><!-- มีบางอย่างหายไป!!-->
<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">{{}}'s Sushi Store</h1>
      <h2 class="text-center">Open Since 10*200 </h2>
    </header>
    <!-- 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>
    <!-- มีบางอย่างหายไป!!-->
</body>
</html>