Home / Developer  / Angularjs  / การเขียน Single Page Application ด้วย AngularJS

การเขียน 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 ใช้เองได้ เช่น

ซึ่งเรียกว่า 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 เป็นดังนี้ครับ

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

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

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

ไฟล์ index.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 ครับ

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.