AngularjsDeveloperProgramming Language

การเขียน Single Page Application ด้วย AngularJS

AngularJS เป็น Javascript Framework สำหรับทำ eb Application อีกทั้ง AngularJS ยังได้รับการสนับสนุนโดย Google อีกเช่นกันครับ

Screen Shot 2558-07-08 at 11.16.41 PM

สิ่งแรกที่เราจะต้องเรียนรู้ก่อนจะเข้าสู่การศึกษา AngularJS นั้น เราอาจจะต้องมีพื้นฐานของ Javascript (DOM, Javascript Object) และ jQuery เป็นหลักก้อนครับ เพราะการทำงานของ AngularJS นั้นเน้นการทำงานเป็นแบบ MVC (Model View Controller) ซึ่งทำให้คนเขียนโปรแกรมไม่ต้องกังวลกับเรื่องของ Design ครับ

Screen Shot 2558-07-08 at 11.15.50 PM

โดย AngularJS จะทำงานแบบ Directive และ การ Binding Data ไปยังหน้า View โดยอ้างจาก Controller ครับ ซึ่ง Data Binding คือการผูกค่าของตัวแปรในภาษา Javascript ให้ขึ้นอยู่กับ Tag HTML ส่วนของดีไซน์เว็บไซต์ ซ้ำเรายังสามารถสร้าง Tag หรือ Attribute ใน HTML ใช้เองได้ เช่น

<this-second-page-sameple>Test</this-second-page-sameple>

ซึ่งเรียกว่า Directive ครับ

Screen Shot 2558-07-08 at 11.17.21 PM

มาเริ่มต้นเขียน Single Page Application แรกกันดีกว่าครับ

Screen Shot 2558-07-08 at 11.18.26 PM

เริ่มต้นให้ไปดาวน์โหลด ไฟล์ AngularJS ในเว็บไซต์

http://angularjs.org

มาลงไว้ในเครื่องครับ (ตัวอย่างใช้ XAMPP) ครับ เมื่อเข้าไปดาวน์โหลดแนะนำว่าให้ดาวน์โหลดตัวที่เป็น Stable นะครับ จมีความเสถียรดีกว่า และก็เลือกแบบ Minify ครับ ดาวน์โหลดลงมาที่เครื่องเรา Path ของ XAMPP ได้เลยครับ

Screen Shot 2558-07-08 at 11.20.17 PM

สร้างไฟล์ index.html ขึ้นมาใหม่ครับ แล้วนำเข้า ไฟล์ javascript ตัว angular.min.js ประกาศไว้บน html ครับ

Screen Shot 2558-07-08 at 11.21.38 PM

 

ไฟล์ index.html เป็นดังนี้ครับ

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> <title>AngularJS</title> 
</head> 
<body> 
<script src="angular.min.js"></script> </body> 
</html>

ขั้นตอนต่อไปคือเพิ่ม Attribute ใหม่ที่เป็น Strict ของ AngularJS ที่เรียกว่า ng-app ไว้ที่ Tag <html> ครับ

<!doctype html> 
<html data-ng-app=""> 
<head> 
<meta charset="utf-8"> <title>AngularJS</title>

ไปที่ <body> tag ของภาษา html ปกติครับ เพิ่มเติม Directive ของ AngularJS เข้าไปตามตัวอย่างนี้ครับ

Name: <input type="text" data-ng-model="name"/> {{name}}

เราจะสร้าง {{name}} มาแสดงผลลัพธ์ที่รับค่าจาก data-ng-model=”name” สังเกตุว่า ผลลัพธ์จะมีชื่อเดียวกับ ng-model ครับนั่นคือ “name”

ไฟล์ index.html จะเป็นดังนี้ครับ

<!doctype html> 
<html data-ng-app=""> 
<head> 
<meta charset="utf-8"> <title>AngularJS</title> 
</head> 

<body> 
Name: <input type="text" data-ng-model="name"/> {{name}} 
<script src="angular.min.js"></script> 
</body> 
</html>

ทำการทดสอบกันหน่อย http://localhost/angularjs/ แล้วพิมพ์ชื่อเราลงไปที่ TextBox Name: ได้เลยครับ แล้วสังเกตุผลลัพธ์ให้ดีครับ

Screen Shot 2558-07-08 at 11.27.56 PM

การพิมพ์จะมีการเรียกแบบ Real Time แสดงผลออกมาครับ

Screen Shot 2558-07-08 at 11.29.00 PM

เป็นการเริ่มต้น Basic ที่เข้าใจได้ไม่ยากใช่ไหมครับ? ลองเอาไปทดสอบกันดูครับ

บทเรียนต่อไปคือการใช้งาน filter และ orderBy ด้วย ng-repeat ครับ

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน