Basic Routing Angular เชื่อมโยงหน้าเเบบรีบๆ

Phumai Chanphunga
Sep 23, 2018 · 4 min read

อ่านจาก Docs มาเเล้วมาเขียนให้ฟัง

การเชื่อมโยงเเต่ละหน้า คือการเชื่อม event ว่าถ้าเราทำให้เกิด event อะไรสักอย่างในหน้านี้ ถ้า event เราเป็นเเบบไม่มีเงื่อนไข มันก็จะไปหน้าที่เราต้องการ ผมเรียกสิ่งนี้ว่า Routing

เนื้อหา

  • การส่งค่าข้ามหน้า ไปพร้อมกับการเปลี่ยนหน้าเว็บ

โยงหน้าใน angular 6 เเบบง่ายๆ

$ ng new basic-routing
ติดตั้งครั้งเเรกจะนานหน่อย นานมาก นานไปนะ

หลัง create project เสร็จ ก็ลองทดสอบ

$ ng serve

เเล้วก็เข้าไปที่ http://localhost:4200/

หน้าการทำงานที่เราจะเอาทำเป็นตัวอย่างการเชื่อมหน้า

page 1
page 2

ตัวอย่างการทำงาน : เมื่อ user มีการกรอกข้อมูลใน input form หน้าเเรก เเล้วทำการ กดปุ่มสีส้ม เเล้วข้อมูลจะถูกนำมาโชว์ที่ หน้าสอง เเละเมื่อกด ปุ่ม สีดำ จะกลับไปให้ page 1

ก่อนอื่นเลยต้องหน้า ทั้งสองหน้านี้ก่อน

สร้างหน้า input-insert

$ ng g c input-insert

สร้างหน้า show-input-data

$ ng g c show-input-data

การสร้าง routing สามารถสร้างได้ที่ ไฟล์ app.module.ts ได้เลย เเต่เมื่อหน้า เราเยอะขึ้นเราก็ยากต่อการจัดการการทำงานของ routing สิ่งที่เราจะทำคือสร้าง module ขึ้นมาตัวหนึ่งให้เป็น ตัวจัดการ routing โดยตรง

เราจะให้คำสั่งในการสร้าง module เราจะสร้าง module ชื่อ routing-main

$ ng generate module routing-main

และเมื่อเราสร้างส่วนทั้งสามส่วนเสร็จเเล้ว project เราก็จะมาหน้าตาประมาณนี้

project

เราก็ทำการทดสอบว่าเเต่ละหน้าทำงานได้ด้วยการเข้า tag ของเเต่ละหน้ามา render ใน app.component.html พอทำหน้าหนึ่งเสร็จก็ทำอีกหน้าด้วยการ comment code หน้าเดิม เเล้วใส่ tag อีกหน้าเข้าไป

render page input-insert
render page input-insert
render show-input-data
render show-input-data

ออกสร้าหน้าตามที่ ออกเเบบ เราจะใช้ Angular Material ช่วยในการ ออกเเบบ UI

ติดตั้ง Angular Material

npm install --save-exact @angular/material@5.2.4 @angular/cdk@5.2.4

update styles.css

@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

body {
margin: 0;
font-family: Roboto, sans-serif;
}

update app.module.ts

app.module.ts

หลังเรา update file เสร็จถ้า errorr เเบบนี้

ให้ทำการ stop server เเล้วติดตั้ง rxjs-compat

npm i rxjs-compat@6.1.0 --save

เเล้วทำการ ng serve อีกรอบ เเล้วก็จะหาย error

สร้างหน้าเเรกเป็นหน้า Insert data จาก Input สองตัว

input-insert.component.html
input-insert.component.ts

สร้างหน้าที่สองส่วนการเเสดงผลต่อจาก input หน้าเเรก

หลังเราได้สร้าง file หน้า UI ตามต้องการเเล้ว ก็มาสร้างส่วนเชื่อมต่อเเต่ละตัว คือสร้าง routing module

บรรทัด 4–5 จะ import commponent ที่เราสร้างขึ้นมาสองตัว
บรรทัด 6–9 จะเป็นการกำหนดว่าถ้ามีการ link มาที่ path นี้ ให้ render หน้าไหน

เเล้ว import routing ใส่ไปใน app.module.ts

เเล้วทำการ Update app.component.html ด้วยการเพิ่ม code html

<router-outlet></router-outlet>

เเล้วลองทดสอบเปลี่ยนเป็น http://localhost:4200/show ก็จะทำการ render หน้า Show ตามที่เรา Map path ไว้

show page

เเล้วเราจะส่ง ข้อมูลจากหน้าหนึ่งไปเเสดงหน้าหนึ่งยังงัย ??

เราจะทำการ ฝากไปกับ prams เห้ยยยยยยยยยย

เราจะใช้ Router เป็น link ไปหน้าถัดไป เเล้วจะฝากตัวข้อมูลไปด้วย

Update file input-insert.component.ts

router defined constructor before call (line 12)

จะเห็นว่าบรรทัดที่ 18–20 จะ เป็น code ของ function SubmitdData() ซึ่งจะเป็น function ทำงานตอนการ Click ปุ่ม submit ในหน้า input เเล้วจะ link ไปหน้า ที่มี path ‘/show’ ในที่นี้เราจะ render หน้า เเสดงผล และจะเห็นว่าใน

this.router.navigate(['show',{first:data.first,last:data.last}])

จะการส่ง object ที่ได้ค่าจาก สอง input

พอมาถึงหน้า show data เราก็จะทำการ ดัก prams ที่เข้ามาด้วย ActivatedRoute

update file show-input-data.component.ts

จะเห็นงว่า บรรทัดที่ 13–16 จะอยู่ใน function ngOnInit() จะทำงานตอน render หน้านี้ เเล้วเราก็ดัก Data เเล้วเข้าไป show ที่ file

show-input-data.component.html

show data

จาก บรรทัดที่ 6 ของ code ด้านบนจะเห็นว่า มี การใช้ routerLink มันจะช่วยในการเชื่อมโดยโดยไม่มีเงื่อนไขตรวจสอบ คือถ้ากดมันก็จะไปตามตาม path ที่ เรากำหนด

input page
show data

code ตัวอย่างงงงง

Devahoy

Learn and share about technologies that power the world, read more at https://devahoy.com

Phumai Chanphunga

Written by

Full Stack sleepper Computer En

Devahoy

Devahoy

Learn and share about technologies that power the world, read more at https://devahoy.com