ในกระบวนการเรียนรู้ AngularJS ฉันรู้สึกว่ามันเป็นวิธีที่ดีกว่าในการรับข้อมูลจากฐานข้อมูลเซิร์ฟเวอร์ในครั้งเดียวและทำให้มันติดอันดับด้านหน้า เพราะมันช่วยประหยัดภาระการสื่อสารของปลายด้านหน้าและด้านหลังและส่งงานแสดงผลเพิ่มเติมไปที่ปลายด้านหน้า
เนื้อหานี้แบ่งออกเป็นสองส่วน ส่วนแรก จะแนะนำสถานที่บริการ $ ในตัวของ AngularJS สั้น ๆ และฟังก์ชั่น ส่วนที่สอง จะตระหนักถึงผลกระทบของการแสดงการปนเปื้อนของข้อมูลฐานข้อมูลผ่านตัวอย่างที่ค่อนข้างครบถ้วน
เมื่อทำงานเกี่ยวกับมุมมองและเส้นทางของ AngularJs ฉันรู้สึกว่าฉันควรมีความเข้าใจที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับบริการและที่ตั้งในตัวของ AngularJS เนื่องจากการทำงานของ URL ในตัวที่ให้บริการเบราว์เซอร์มีความสัมพันธ์กันอย่างใกล้ชิด ฉันรู้สึกว่าถ้าบริการนี้ดำเนินการมันจะมีประโยชน์มากสำหรับการหมุนเวียนหน้าหน้าในอนาคต
ด้านล่างคือการทดลองเล็ก ๆ ของฉันและประสบการณ์บางอย่างซึ่งเขียนขึ้นในภาษาพื้นถิ่นและอาจไม่เป็นมืออาชีพ แต่ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจแนวคิดบางอย่างของ AngularJs
สถานที่ นี้ใช้เป็นบริการเป็นพารามิเตอร์ของฟังก์ชั่นการส่งคืนของคอนโทรลเลอร์ในการฉีดพึ่งพา ต่อไปนี้เป็นตัวอย่างที่จะอธิบายการใช้บริการนี้
ส่วนที่ 1: รับข้อมูล URL
& ตำแหน่งมีวิธีการ getter และ setter บางอย่างเช่น absurl, path, protocol, host, พอร์ต คำอธิบายเฉพาะคือสิ่งเหล่านี้เป็นชื่อฟังก์ชั่นของฟังก์ชั่นที่อยู่ลิงก์ที่จัดทำโดย & ตำแหน่ง หากฟังก์ชั่นเหล่านี้ไม่ผ่านพารามิเตอร์ใด ๆ เมื่อใช้ก็หมายถึงการได้รับข้อมูล URL ปัจจุบัน หากพารามิเตอร์บางอย่างถูกส่งผ่านมันหมายถึงการตั้งค่าข้อมูล URL ในเบราว์เซอร์ปัจจุบัน
ตัวอย่างที่ 1
<! doctype html> <html ng-app = "locationApp"> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body ng-controller = "LocationController"> <p> absurl ----------- {{absurl}} </p> <p> เส้นทาง --------------- {{path}} </p> <p> pro tocol ----------- {{โปรโตคอล}} </p> <p> โฮสต์ ---------------- {{โฮสต์}} </p> <p> พอร์ต ---------------- {{{port}} </p> <สคริปต์ src = "angular.js"> </script> <script> var locationApp = Angular.module ('LocationApp', []); LocationApp.Controller ('LocationController', ['$ scope', '$ location', ฟังก์ชั่น ($ scope, $ ตำแหน่ง) {$ scope.absurl = $ location.absurl (); $ scope.path = $ location.path (); }]); </script> </body> </html>จากภาพหน้าจอจะเห็นได้อย่างชัดเจนว่าวิธีการ getter ที่ให้บริการโดยบริการ $ location สามารถรับข้อมูล URL ปัจจุบันของเบราว์เซอร์ L ได้อย่างง่ายดาย
นักเรียนระวังอาจเห็นเส้นทางนี้ทำไมไม่มีค่า?
นี่เป็นเพราะไม่มีข้อมูลเส้นทางในที่อยู่ลิงค์ หากเราตั้งค่าข้อมูลเส้นทางด้วยตนเองผ่านวิธี PATH () จากนั้นรีเฟรชเบราว์เซอร์ (ที่อยู่ URL ของเบราว์เซอร์คือข้อมูลที่คุณแก้ไขเมื่อรีเฟรชและจะไม่เปลี่ยนแปลง) เราจะเห็นข้อมูลเส้นทาง มีรูปภาพและความจริง!
ตัวอย่างที่ 2
$ location.path ('รายละเอียด');
$ scope.path = $ location.path ();
จากการปรับเปลี่ยนขนาดเล็กด้านบนฉันแก้ไขรหัสและแก้ไขค่าของแอตทริบิวต์เส้นทางในการบริการในตัวของ $ ตำแหน่งเป็นครั้งแรก (สาระสำคัญของมันคือวัตถุซึ่งมีคุณลักษณะมากมายเกี่ยวกับข้อมูล URL)
จากนั้นรับค่าใหม่ผ่านวิธี getter
นอกจากนี้เนื่องจากข้อมูล URL ที่ให้บริการแถบที่อยู่เบราว์เซอร์คือการผูกมัดแบบสองทิศทาง (นี่เป็นส่วนที่ยอดเยี่ยมที่สุดของ AngularJs) ไม่ว่าคุณลักษณะของวัตถุที่ตั้งหรือแถบที่อยู่เบราว์เซอร์ตราบใดที่ข้อมูล URL ของฝ่ายหนึ่งเปลี่ยนไป ดังนั้นฉันจึงเห็นว่ามีข้อมูลเส้นทางเช่นรายละเอียดในแถบที่อยู่ของเบราว์เซอร์ในภาพหน้าจอ ข้อมูลนี้ถูกตั้งค่าผ่านรหัสก่อน
เกี่ยวกับการใช้งานฟังก์ชั่นการแสดงการแสดงพลิเคชันของ AngularJS จะได้รับการแนะนำให้รู้จักกับคุณในบทความถัดไปฉันหวังว่าคุณจะไม่พลาด