Single Page Application (SPA) & Routing
>> Single Page Application หลักการนี้ก็คือ หนึ่งแอปพลิเคชันนั้นอยู่ในหนึ่งหน้า หนึ่งหน้า! ไม่ผิดครับ คือทั้งแอปแสดงอยู่ในหน้าเอกสาร html เพียงหน้าเดียวเท่านั้น เหอะๆ ด้วยความสามารถของ AngularJS มันถูกออกแบบมาเพื่อการนี้เลยเทียวล่ะ
>> Routing ก็คือการจัดการ URL หรือการควบคุม URL ครับ ตัวอย่างเช่น ต้องการหน้าที่ชื่อ customers.html หรือหน้าแสดงรายการต่างๆของคุณลูกค้าคนหนึ่ง สมมติมันถูกเก็บไว้ที่ projects/shopping/customers.html เราอาจกำหนด URL ให้เข้าถึงได้จาก shopping/C001 ก็จะหมายถึงให้ไปที่หน้า customers.html แล้วค้นหา id ของคุณลูกค้าคือ C001 แล้วแสดงรายละเอียดของเขาหรือเธอออกมาอย่างนี้ก็ได้
>> ผมได้เขียนโค้ดตัวอย่าง (ตามตัวอย่างอีกที) ไว้ที่ Coding ground editor แล้วก็นำมาแชร์ออนไลน์ ณ http://goo.gl/R0HK21 (เข้าไปดูสิ)
โดยเพื่อนๆสามารถคลิกเข้าไปดู แล้วกดปุ่ม Preview เพื่อชมผลลัพธ์ได้เลย การทำงานของมันก็คือ
- มีหน้าที่ชื่อ index.html เป็นหน้าหลักในการแสดงผล (SPA main page)
- มีหน้าย่อยๆสามหน้าเก็บไว้ใน folder ชื่อ views นั่นคือ home.html customer.html และ about.html
- เมื่อคลิกลิงค์ตรงด้านบนในหน้า index.html เหล่าหน้าย่อยจะถูกเรียกให้มาแสดงผลโดยไม่มีการ reload page เลยสักครั้ง
- หัวใจของหน้าหลัก index.html ก็คือ directive ที่ชื่อ ng-view มันมีผลให้หน้าย่อยที่ถูกเรียกถูกนำมาแสดง ณ ตรงจุดนี้ทั้งหมด
- อย่างไรก็ตามตัว routing จะเข้ามาจัดการ URL โดยเทียบเคียงจากลิงค์ของแท็ก a ที่เราได้กำหนดเอาไว้ เมื่อตรงกันกับเงื่อนไขของ $routeProvider.when ใดๆ AngularJS จะไปเรียกหน้าดังกล่าวมาให้โดยผ่านตัวแปรชื่อ templateUrl
- แต่ก่อนที่หน้าย่อยจะถูกนำมาแสดงนั้น เราได้บอกให้มันไปเรียก controller ใดๆขึ้นมาทำงานด้วยนะเออ ส่งผลให้ค่าของตัวแปรที่ชื่อ controllerName เปลี่ยนแปลงไปตามหน้าย่อยเหล่านั้นนั่นเองจ้า
>> ศึกษา SPA ตัวอย่างอื่นๆเพิ่มเติม
- http://hello-angularjs.appspot.com/spa#/searchtable
- http://www.w3schools.com/angular/angular_application.asp
- https://www.youtube.com/watch?v=2QJRifW-zbs
ไม่มีความคิดเห็น:
แสดงความคิดเห็น