Home / Developer  / Angularjs  / AngularJS กับการ GET ข้อมูล http เพื่อเปลี่ยนหน้าด้วย $location

AngularJS กับการ GET ข้อมูล http เพื่อเปลี่ยนหน้าด้วย $location

บทเรียนการส่ง Parameter ด้วย AngularJS แบบ GET Method ไปบน URL รูปแบบของ AngularJS ต้องใช้ $location มาใช่ร่วมกับ $scope ในการรับค่า Paramter ที่ GET ไป

บทความนี้มีความต่อเนื่องมาจากบทความต่อไปนี้

โดยปรกติแล้วการ GET Parameter ผ่าน http แล้วส่วนใหญ่เราจะพบรูปแบบหลากหลายทั้ง

?data=value

และ

/data/value

หรืออะไรอีกหลายๆ แบบครับ สำหรับ AngularJS ก็จะมีหลากหลายแบบเหมือนกันแต่ ตัวอย่างนี้จะเอาส่วนของ $location มาช่วยให้เข้าใจง่ายสำหรับผู้เริ่มต้นครับ

ต่อจากงานเก่าเรามีหน้าแรกมีการค้นหา filter มีหน้า register แล้วต่อไปเราจะทำหน้า info ครับ

ให้เราสร้าง view ชื่อ info.html และ controller ชื่อ controller/info.js ขึ้นมาครับ

Screen Shot 2558-07-10 at 11.31.42 PM

ไปแก้ไขที่หน้า index.html เล็กน้อยครับ เพิ่ม Link ที่ ตาราง table เพื่อส่งค่า parameter อ้าง id ไว้ใช้กับหน้า info.html

จะเห็นว่าเรามีการ สร้าง Link เปิดไปหน้า info.html โดยต่อ parameter ด้วย “#” หรือ (HashTag) ด้วย id ครับ การส่งไปก็จะเป็นดังนี้

info.html#4

หน้าจอตารางของ index.html ก็จะเป็นดังนี้ครับ

Screen Shot 2558-07-10 at 11.36.29 PM

ให้เราไปสร้างหน้า View ง่าย info.html ครับ มีหน้าที่แค่ แสดงผลของ ข้อมูลที่ ดึงมาด้วย id ของคนคนนั้นก็พอ

ng-app คือ infoModules และ controller คือ infoController ตามด้วย controller/info.js แนบไว้ตอนท้าย

จะเห็นว่าเรามีการเพิ่ม $location ขึ้นมาเพื่อช่วยเรื่องของการ เรียก URL ที่เราแสดงตอนนี้ออกมา

การเรียกคือ

เราจะได้ค่า Parameter ต่อจาก info.html# มาทันทีคือ

/4

ให้ทำการ replace string แบบลูกทุ่งครับ

ผลลัพธ์คือ

4

แล้วเอา newString ไปต่อท้าย API ทันทีครับ

หมายความว่าการเรียก API จะเป็นแบบนี้ครับ

http://localhost/angularjs/api/getuser.php?id=4

ดังนั้นหน้า getuser.php ต้องมีการใช้ SQL ที่มีคำสั่ง WHERE มาช่วย ให้เราไปสร้าง API ใหม่ที่ api/getuser.php ตามนี้ครับ

ลองดู API เรียก id= 4 จะได้ตามนี้ครับ

Screen Shot 2558-07-10 at 11.44.43 PM

ทดสอบกันดีกว่าลองกด Link ดู info ของแต่ละคนที่หน้าแรกกันสักหน่อย

Screen Shot 2558-07-10 at 11.45.46 PM

เรียบร้อยไปอีกรูปแบบ อันที่จริงบทเรียนนี้ประยุกต์ใช้ได้กับ การ Edit แก้ไขข้อมูลนะครับโดยอาศัย code จากบทเรียน

มาช่วยได้ก็จะทำให้สบายมือไปได้เยอะครับ

บทเรียนต่อไปเป็น การ Edit และ Delete และเราจะจบ Workshop นี้ที่การใช้ $window เพื่อทำการ Checkin Login การเข้าระบบและ Session ครับ

(ไปไม่ถึง Route นะบอกก่อน จะเว้นระยะสักหน่อยไปเขียน UDK, Unity)

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.