สปาโดยใช้ AngularJS



โพสต์บล็อกนี้เป็นข้อมูลเบื้องต้นสั้น ๆ เกี่ยวกับการสร้างสปาโดยใช้ AngularJS มันพยายามที่จะให้ข้อมูลที่จำเป็นสำหรับคุณในการรวมส่วนประกอบ SPA ในแอพ

ปัจจุบัน AngularJS ได้กลายเป็นหนึ่งในกรอบการพัฒนาที่ได้รับความนิยมมากที่สุดเนื่องจากความสามารถในการช่วยให้นักพัฒนาสร้าง Single Page Applications (SPA) ได้อย่างง่ายดาย ในเว็บแอปพลิเคชันแบบเดิมไคลเอนต์ (เบราว์เซอร์) เริ่มต้นช่องทางการสื่อสารกับเซิร์ฟเวอร์โดยการร้องขอเพจ เซิร์ฟเวอร์ตอบสนองโดยการประมวลผลคำขอและส่ง HTML ของเพจกลับไปยังไคลเอนต์ หากผู้ใช้ร้องขอเพจใหม่เซิร์ฟเวอร์จะส่งเพจ HTML อื่น แม้ว่าไคลเอ็นต์จะขอการเปลี่ยนแปลงเล็กน้อย แต่ให้พูดแบบฟอร์มที่มีรายละเอียดพื้นฐานเซิร์ฟเวอร์จะต้องโหลดทั้งหน้าอีกครั้งและส่งกลับไปยังไคลเอนต์

คำขอ HTML และ Ajax

ในแอปพลิเคชันหน้าเดียวทั้งหน้าจะโหลดในภาพเดียวและการสื่อสารที่ตามมาจะดำเนินการโดยเซิร์ฟเวอร์โดยใช้คำขอของ Ajax เบราว์เซอร์ต้องอัปเดตเฉพาะส่วนของหน้าที่มีการเปลี่ยนแปลงและไม่จำเป็นต้องโหลดซ้ำทั้งหน้าทุกครั้งที่ผู้ใช้ส่งคำขอใหม่
เนื่องจากวิธีการ SPA ช่วยลดเวลาที่เซิร์ฟเวอร์ใช้ในการตอบสนองคำขอของผู้ใช้เว็บแอปพลิเคชันจึงทำงานได้เร็วขึ้นใช้พลังงานในการประมวลผลน้อยลงและช่วยให้นักพัฒนาส่วนต่อประสานผู้ใช้ (UI) สามารถสร้างหน้าเว็บที่น่าดึงดูดและคล่องตัวมากขึ้น





การสร้างหน้าเชลล์

'หน้าเดียว' ใน SPA หมายถึงเชลล์เพจที่ตอบสนองต่อการสืบค้นในรูปแบบ HTML, CSS หรือ JavaScript หน้าเชลล์แสดงผลแบบอะซิงโครนัสกับ HTML ทำให้ไม่จำเป็นต้องเดินทางไปมาที่เซิร์ฟเวอร์ เชลล์เพจต้องการเพียงการอ้างอิงไปยังไลบรารี AngularJS JavaScript และคำสั่ง ng-view (คอนเทนเนอร์เสมือนที่อนุญาตให้นักพัฒนา UI สลับไปมาระหว่างมุมมอง) เพื่อบอก AngularJS ว่าต้องแสดงเพจเนื้อหาบนเชลล์เพจที่ไหน
ภายในหน้า 'เดียว' เดียวกัน AngularJS ช่วยให้นักพัฒนาสามารถให้ข้อมูลหลายมุมมองที่อยู่ใน URL เดียวกัน ชุดของมุมมองที่แตกต่างกันสามารถปรากฏขึ้นทีละชุดภายในเชลล์เพจเดียวกันและแต่ละมุมมองจะโหลดแบบไดนามิกเมื่อผู้ใช้เลื่อนดูเพจ

SPA-using-AngularJS-multiple-views



AngularJS Directive ในตัว - ng-app - ช่วยให้นักพัฒนาสามารถเริ่มต้นแอปพร้อมตัวเลือกในการเพิ่มคำสั่งของบุคคลที่สามได้เช่นกัน ในทางกลับกัน ng-model Directive ช่วยให้คุณสามารถเพิ่มนิพจน์การผูกข้อมูลลงในหน่วยความจำได้ ดูที่นี่:

โฮเวอร์ใน css คืออะไร

นักพัฒนาทั่วโลกได้นำ SPA มาใช้โดยใช้ AngularJS และคาดว่าแนวโน้มนี้จะคงอยู่ไปอีกสักพัก



มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป

กระทู้ที่เกี่ยวข้อง: อาชีพการพัฒนาเว็บที่ประสบความสำเร็จกับ AngularJS