ต่อจากการการทำ Directives ในบล็อกก่อนหน้า เราจะมาพูดถึงการสร้าง Routing ที่เป็นส่วนช่วยในการเปลี่ยนหน้าของระบบ ซึ่งจะทำให้ระบบสามารถแบ่งส่วนได้ชัดเจนมากยิ่งขึ้น โดยในหัวข้อนี้เราจะทำการสร้างเมนู เพื่อให้สามารถเปลี่ยนหน้าแบบไม่ต้องโหลดได้ โดยเราจะสร้าง Component “Home” เพื่อเป็นหน้าหลัก โดยใช้คำสั่ง

>ng generate component home

จากนั้นให้เราสร้างเมนู ในไฟล์ app.component.html ดังภาพที่ 1

ภาพที่ 1 สร้างเมนู Home, Calculator, User
ภาพที่ 2 ผลลัพธ์จากการเพิ่มเมนู

การที่เราจะทำให้ Angular เปลี่ยนหน้าโดยที่ไม่ต้องโหลดหน้าใหม่ เราสามารถใช้ความสามารถของ Router ที่จะพาไปยังหน้าที่เราต้องการ โดยเราจะต้องเข้าไปทำการตั้งค่าที่ไฟล์ app.module.ts เพื่อให้ Angular ทราบก่อน โดยเราจะนิยาม Route หรือเส้นทางของเราใน myRoutes เพื่อบอกว่าเมื่อไหร่ที่เข้ามาจาก /pages ให้วิ่งไปที่ component ชื่อ HomeComponent, CalculatorComponent หรือ UserComponent และถึงแม้เราจะมีเส้นทางแล้ว แต่หาก root module ของเราไม่รู้จักก็เท่านั้น เราจึงต้องทำให้ root module ของเรารับรู้ผ่าน RouterModule.forRoot() ดังภาพที่ 3

ภาพที่ 3 การตั้งค่าที่ไฟล์ app.module.ts

จากนั้นไปยังไฟล์ app.component.html ที่เราสร้างไว้ในภาพที่ 1 และแก้ไข ดังภาพที่ 4 และแสดงผลลัพธ์ในภาพที่ 5

ภาพที่ 4 ใส่ลิงค์ให้เมนู
ภาพที่ 5 ผลลัพธ์

สรุปการทำ Routing เหมาะกับการทำ Single Page Application เพื่อส่ง request ขอข้อมูลแค่บางส่วนของหน้าเท่านั้น…

Share the Post:

Related Posts

ทำความรู้จักกับ Outlook บนเว็บ

Post Views: 5 Outlook เป็นเครื่องมือจัดการอีเมลและปฏิทินที่ทรงพลัง ซึ่งช่วยให้คุณมีระเบียบและเพิ่มความสามารถในการทำงาน ด้วยอินเทอร์เฟซที่ใช้งานง่าย คุณสามารถจัดการกล่องขาเข้าของคุณ นัดหมาย และทำงานร่วมกับเพื่อนร่วมงานได้อย่างง่ายดาย ฟีเจอร์ที่แข็งแกร่งของ Outlook รวมถึงแม่แบบอีเมลที่ปรับแต่งได้ ความสามารถในการค้นหาขั้นสูง และการผสานรวมที่ไร้รอยต่อกับแอปพลิเคชัน Microsoft Office อื่นๆ ไม่ว่าคุณจะเป็นมืออาชีพที่ยุ่งอยู่หรือเป็นนักเรียนที่ต้องจัดการกับภารกิจหลายอย่าง Outlook

Read More

[บันทึกกันลืม] JupyterHub Authenticated with OIDC

Post Views: 36 ต่อจากตอนที่แล้ว [บันทึกกันลืม] JupyterHub ด้วย Docker คราวนี้ ถ้าต้องการให้ ยืนยันตัวตนด้วย OpenID เช่น PSU Passport เป็นต้น ก็ให้ทำดังนี้ ในไฟล์ jupyterhub_config.py ใส่

Read More