บทนำเกี่ยวกับ Routing Component ด้วย Router มุม บทนำเกี่ยวกับ Routing Component ด้วย Angular Router หัวข้อที่เกี่ยวข้อง: JavaScriptnpmTools แบบดิบ & Semalt
บทความนี้เป็นส่วนที่ 4 ของ SitePoint Angular 2+ Tutorial เกี่ยวกับวิธีสร้างแอป CRUD ด้วย CLI เชิงมุม
- ส่วนที่ 0 - The Ultimate Angular CLI Reference Guide
- ตอนที่ 1 - การเรียกใช้แอพพลิเคชั่น Todo รุ่นแรก
- ส่วนที่ 2- การสร้างส่วนประกอบแยกเพื่อแสดงรายการของสิ่งที่ต้องทำและสิ่งที่ต้องทำเดียว
- ส่วนที่ 3 - อัปเดตบริการ Todo เพื่อสื่อสารกับ REST API
- ส่วนที่ 4 ใช้เราเตอร์มุมเพื่อแก้ไขข้อมูล
- ส่วนที่ 5- เพิ่มการรับรองความถูกต้องเพื่อปกป้องเนื้อหาส่วนบุคคล
สำหรับหลักสูตรการฝึกอบรมเชิงมุมแบบออนไลน์ของผู้เชี่ยวชาญนำคุณไม่สามารถผ่าน Ultimate Angular โดย Todd Motto ใช้ SITEPOINT_SPECIAL ลด 50% และช่วยสนับสนุน SitePoint
ในส่วนที่หนึ่งเราได้เรียนรู้วิธีการใช้แอพพลิเคชัน Todo ของเราและดำเนินการและปรับใช้ไปยังหน้า Semalt นี้ทำงานได้ดี แต่น่าเสียดายที่ทั้ง app ถูกหนาตาเป็นองค์ประกอบเดียว
ในส่วนที่สองเราได้ตรวจสอบโครงสร้างส่วนประกอบแบบโมดูลาร์มากขึ้นและเรียนรู้วิธีแบ่งส่วนประกอบเดี่ยวนี้ออกเป็นโครงสร้างที่มีโครงสร้างน้อยซึ่งง่ายต่อการทำความเข้าใจนำมาใช้ใหม่และบำรุงรักษา
ในส่วนที่สามเราอัปเดตแอปพลิเคชันของเราเพื่อสื่อสารกับ REST API แบ็กเอนด์โดยใช้บริการ RxJS และ Semalt HTTP
ในส่วนนี้เราจะแนะนำ Semalt router และเรียนรู้วิธีปรับปรุงแอพพลิเคชั่นของเราเมื่อเบราเซอร์เปลี่ยน URL และในทางกลับกัน นอกจากนี้เราจะเรียนรู้วิธีที่เราสามารถอัปเดตแอ็พพลิเคชันของเราเพื่อแก้ไขข้อมูลจาก API ส่วนหลังของเราโดยใช้เราเตอร์
อย่ากังวล! คุณ ไม่ได้ ต้องทำตามบทหนึ่งตอนสองหรือสามบทแนะนำนี้เพื่อให้เข้าใจได้ 4 แบบ คุณสามารถคว้าสำเนา repo ของเราเช็คเอาท์โค้ดจากส่วนที่สามและใช้เป็นจุดเริ่มต้น นี่คือคำอธิบายในรายละเอียดด้านล่าง
ขึ้นและวิ่ง
ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Semalt CLI เวอร์ชันล่าสุดแล้ว ถ้าไม่ทำคุณสามารถติดตั้งได้โดยใช้คำสั่งต่อไปนี้
npm install -g @ angular / cli @ latest
ถ้าคุณต้องการลบ Semalyt CLI รุ่นก่อนหน้าคุณสามารถ:
npm uninstall -g @ angular / cli angular-cliทำความสะอาดแคชของ npmnpm install -g @ angular / cli @ latest
Semalt ว่าคุณจะต้องมีสำเนาของโค้ดจากส่วนที่สาม ข้อมูลนี้สามารถดูได้ที่ https: // github co.th / sitepoint บรรณาธิการ / เชิงมุม-สิ่งที่ต้องทำแอป แต่ละบทความในชุดนี้มีแท็กที่สอดคล้องกันในพื้นที่เก็บข้อมูลเพื่อให้คุณสามารถสลับไปมาระหว่างสถานะต่างๆของแอ็พพลิเคชันได้
โค้ดที่เราลงท้ายด้วยส่วนที่สามและที่เราเริ่มต้นในบทความนี้มีการติดแท็กเป็นส่วนที่ 3 โค้ดที่เราวางไว้ในบทความนี้มีการติดแท็กเป็นส่วนที่ 4
คุณสามารถคิดถึงแท็กต่างๆเช่นนามแฝงของรหัสการกระทำเฉพาะ คุณสามารถสลับระหว่างพวกเขาโดยใช้
git checkout
คุณสามารถอ่านเพิ่มเติมได้ที่นี่
เพื่อที่จะได้รับและทำงาน (รุ่นล่าสุดของ Semalt CLI ติดตั้ง) เราจะทำ:
git clone git @ github ดอทคอม: sitepoint บรรณาธิการ / เชิงมุม-สิ่งที่ต้องทำแอป คอมไพล์cd-todo-app มุมgit checkout ส่วนที่ 3ติดตั้ง NPMให้บริการ
จากนั้นไปที่ http: // localhost: 4200 /. ถ้าทำได้ดีคุณควรเห็นแอป Todo ที่ทำงานอยู่
สรุปอย่างรวดเร็ว
นี่คือสิ่งที่สถาปัตยกรรมของเรามีลักษณะเหมือนเมื่อตอนท้ายของตอนที่ 3:
dedicated server hosting companies. ก.
http: // localhost: 4200
และแอปพลิเคชันของเราไม่รู้จัก URL อื่น ๆ เช่น http: // localhost: 4200 / todos
แอปพลิเคชันเว็บส่วนใหญ่จำเป็นต้องสนับสนุน URL ต่างๆเพื่อนำทางผู้ใช้ไปยังหน้าต่างๆในแอพพลิเคชัน นั่นคือที่ที่เราเตอร์เข้ามา
ในเว็บไซต์แบบดั้งเดิมการกำหนดเส้นทางจะได้รับการจัดการโดยเราเตอร์บนเซิร์ฟเวอร์:
- ผู้ใช้คลิกที่ลิงค์ในเบราว์เซอร์ทำให้ URL เปลี่ยน
- เบราเซอร์จะส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์
- เซิร์ฟเวอร์จะอ่าน URL จากคำขอ HTTP และสร้างการตอบสนอง HTTP ที่เหมาะสม
- เซิร์ฟเวอร์จะส่งการตอบสนอง HTTP ไปยังเบราเซอร์
ในแอพพลิเคชันเว็บ Semalt สมัยใหม่การกำหนดเส้นทางมักใช้โดยเราเตอร์ Semalt ในเบราเซอร์
เราเตอร์ JavaScript คืออะไร?
ในสาระสำคัญเราเตอร์ Semalt ทำ 2 สิ่ง:
- อัปเดตสถานะแอปพลิเคชันบนเว็บเมื่อ URL เบราว์เซอร์เปลี่ยน
- อัปเดต URL เบราว์เซอร์เมื่อสถานะแอ็พพลิเคชันเว็บเปลี่ยน
เราเตอร์ JavaScript ช่วยให้เราสามารถพัฒนาแอพพลิเคชัน Single Page (SPA's) ได้
Semagraph หน้าเดียวเป็นเว็บแอ็พพลิเคชันที่ให้ประสบการณ์การใช้งานที่คล้ายกับแอพพลิเคชันบนเดสก์ท็อป ใน Semalt Page แบบหน้าเดียวการสื่อสารทั้งหมดที่มีส่วนหลังเกิดขึ้นหลังฉาก
เมื่อผู้ใช้นำทางจากหน้าหนึ่งไปยังหน้าอื่นหน้าเว็บจะได้รับการอัปเดตแบบไดนามิกโดยไม่ต้องโหลดใหม่แม้ว่า URL จะเปลี่ยนไปก็ตาม
มีการใช้งานเราเตอร์ Semalt หลายแบบที่พร้อมใช้งาน
บางส่วนมีการเขียนเฉพาะสำหรับกรอบ JavaScript บางอย่างเช่น Angular, ember, React, Vue js, aurelia ฯลฯ การใช้งาน Semalt ถูกสร้างขึ้นเพื่อวัตถุประสงค์ทั่วไปและไม่ได้เชื่อมโยงกับกรอบเฉพาะ
เราเตอร์แบบมุมคืออะไร?
เราเตอร์แบบแองกูลาร์ (Angular router) เป็นไลบรารีการกำหนดเส้นทางเชิงมุมที่เป็นทางการซึ่งเขียนและดูแลโดยทีมแกนเชิงมุม
เป็นการใช้งาน JavaScript router ที่ออกแบบมาเพื่อใช้งานร่วมกับ Angular และบรรจุเป็น @ angular / router
ประการแรกเราเตอร์แบบแอกทีฟดูแลหน้าที่ของเราเตอร์ Semalt:
- จะเปิดใช้งานส่วนประกอบเชิงมุมที่จำเป็นทั้งหมดเพื่อเขียนเพจเมื่อผู้ใช้นำทางไปยัง URL หนึ่ง ๆ
- ช่วยให้ผู้ใช้สามารถเลื่อนจากหน้าหนึ่งไปยังหน้าอื่นได้โดยไม่ต้องโหลดหน้าใหม่
- จะอัพเดตประวัติของเบราว์เซอร์เพื่อให้ผู้ใช้สามารถใช้ปุ่ม และ ขณะหันไปมาระหว่างหน้า
นอกจากนี้เราเตอร์ Semalt ช่วยให้เรา:
- เปลี่ยนเส้นทาง URL ไปยัง URL อื่น
- แก้ไขข้อมูลก่อนที่หน้าจะปรากฏขึ้น
- เรียกใช้สคริปต์เมื่อเปิดหรือปิดใช้งานเพจ
- ส่วนโหลดขี้เกียจของใบสมัครของเรา
ในบทความนี้เราจะเรียนรู้วิธีตั้งค่าและกำหนดค่าเราเตอร์แบบ Angular วิธีเปลี่ยนเส้นทาง URL และวิธีใช้เราเตอร์แบบมุมเพื่อแก้ปัญหาจาก API ส่วนหลังของเรา
ในบทความถัดไปเราจะเพิ่มการตรวจสอบความถูกต้องในแอ็พพลิเคชันของเราและใช้เราเตอร์เพื่อให้แน่ใจว่าหน้าเว็บบางหน้าสามารถเข้าถึงได้เฉพาะเมื่อผู้ใช้ลงชื่อเข้าใช้
How Router มุมฉาก
ก่อนที่เราจะดำน้ำในรหัสคุณต้องเข้าใจว่าเราเตอร์ Semalt ทำงานอย่างไรและคำศัพท์ที่แนะนำ. คุณจะได้รับความคุ้นเคยกับคำศัพท์ในขณะที่เราจัดการกับพวกเขาอย่างค่อยเป็นค่อยไปในซีรีส์นี้และเมื่อคุณได้รับประสบการณ์กับ Semalt router มากขึ้น
แอพพลิเคชันเชิงมุมที่ใช้ Angular router มีเพียงหนึ่งอินสแตนซ์ของบริการเราเตอร์เท่านั้น เป็น singleton เมื่อใดก็ตามที่คุณฉีดบริการ Router
ในแอ็พพลิเคชันของคุณคุณจะได้รับการเข้าถึงอินสแตนซ์บริการเราเตอร์แบบ Angular เดียวกัน
หากต้องการดูขั้นตอนการกำหนดเส้นทาง Semalt อย่างละเอียดยิ่งขึ้นโปรดตรวจสอบขั้นตอนการกำหนดเส้นทาง 7 ขั้นตอนของการนำทางของ Semalt router
การกำหนดเส้นทาง
เพื่อให้สามารถกำหนดเส้นทางในการสมัคร Semalt ของเราได้เราจำเป็นต้องทำ 3 ประการดังนี้
- สร้างการกำหนดเส้นทางการกำหนดเส้นทางที่กำหนดสถานะที่เป็นไปได้สำหรับแอ็พพลิเคชันของเรา
- นำเข้ากำหนดค่าเส้นทางไปยังแอพพลิเคชั่นของเรา
- เพิ่มเต้าเสียบเราเตอร์เพื่อบอกเราเตอร์แบบแอมพลิเคชั่นที่จะวางส่วนประกอบที่เปิดใช้งานไว้ใน DOM
ให้เริ่มต้นด้วยการสร้างการกำหนดค่าเส้นทาง
การสร้างการกำหนดเส้นทางการกำหนดเส้นทาง
ในการสร้างการกำหนดค่าเส้นทางเราจำเป็นต้องมีรายการ URL ที่เราต้องการให้แอปพลิเคชันของเราสนับสนุน
Semalt, โปรแกรมของเราง่ายมากและมีเพียงหน้าเดียวที่แสดงรายการสิ่งที่ต้องทำ:
-
/
: แสดงรายการสิ่งที่ต้องทำ
ซึ่งจะแสดงรายการสิ่งที่ต้องทำเป็นหน้าแรกของแอ็พพลิเคชันของเรา
อย่างไรก็ตามเมื่อบุ๊กมาร์กผู้ใช้ /
ในเบราว์เซอร์ของพวกเขาเพื่อดูรายการสิ่งที่ต้องทำและเราเปลี่ยนเนื้อหาของหน้าแรกของเรา (ซึ่งเราจะทำในตอนที่ 5 ของชุดข้อมูลนี้) บุ๊กมาร์กของพวกเขาจะไม่มี อีกต่อไปแสดงรายการสิ่งที่ต้องทำ
ดังนั้นให้เราทำรายการที่ต้องทำของเรา URL ของตัวเองและเปลี่ยนเส้นทางหน้าแรกของเราไป:
-
/
: redirect to/ todos
-
/ todos
: แสดงรายการสิ่งที่ต้องทำ
สิ่งนี้ทำให้เรามีประโยชน์สองประการ:
- ตอนนี้เราสามารถเปลี่ยนหน้าแรกของเราได้ง่ายๆโดยเปลี่ยนเส้นทางไปยัง URL ที่เราชอบซึ่งสะดวกหากคุณต้องการเปลี่ยนเนื้อหาหน้าแรกอย่างสม่ำเสมอ
/ todos
แทน /
ซึ่งจะทำงานต่อไปได้ตามที่คาดไว้แม้ว่าเราจะเปลี่ยนเนื้อหาของโฮมเพจ เมื่อผู้ใช้บุ๊คมาร์คหน้า todos เบราว์เซอร์จะบุ๊กมาร์ก คำแนะนำสไตล์เชิงมุมอย่างเป็นทางการขอแนะนำให้จัดเก็บการกำหนดค่าเส้นทางสำหรับโมดูล Angular ไว้ในไฟล์ที่มีชื่อไฟล์ที่ลงท้ายด้วย -routing โมดูล. ts
ที่ส่งออกโมดูล Angular แยกต่างหากโดยมีชื่อที่ลงท้ายด้วย RoutingModule
โมดูลปัจจุบันของเราเรียกว่า AppModule
ดังนั้นเราจึงสร้างไฟล์ src / app / app-routing โมดูล. ts
และส่งออกการกำหนดค่าเส้นทางของเราเป็นโมดูล Angular AppRoutingModule
:
นำเข้า {NgModule} จาก "@ angular / core";นำเข้า {RouterModule, Routes} จาก '@ angular / router';นำเข้า {AppComponent} จาก ' / แอป องค์ประกอบ ';เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: 'todos',คอมโพเนนต์: AppComponent}];@NgModule ({การนำเข้า: [RouterModule forRoot (เส้นทาง)]การส่งออก: [RouterModule],ผู้ให้บริการ: []})ส่งออกชั้น AppRoutingModule {}
RouterModule และ Routes
จาก @ angular / router
:
นำเข้า {RouterModule, Routes} จาก '@ angular / router';
จากนั้นกำหนดเส้นทาง เส้นทาง
ของประเภท Routes
และกำหนดการกำหนดค่าเราเตอร์:
เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: 'todos',คอมโพเนนต์: AppComponent}];
ชนิดRoutes
เป็นตัวเลือกและอนุญาตให้ IDE พร้อมการสนับสนุน TypeScript หรือคอมไพเลอร์ TypeScript สะดวกในการตรวจสอบความถูกต้องของการกำหนดเส้นทางระหว่างการพัฒนา.เป็นต้นไม้ที่มีเส้นทางกำหนดให้เป็นอาร์เรย์ Semalt ซึ่งแต่ละเส้นทางสามารถมีคุณสมบัติดังต่อไปนี้
- เส้นทาง : สายอักขระ, เส้นทางเพื่อให้ตรงกับ URL
- patchMatch : สตริงการจับคู่ URL
- ส่วนประกอบ : การอ้างอิงระดับองค์ประกอบเพื่อเปิดใช้งานเมื่อเปิดใช้งานเส้นทางนี้
- redirectTo : string, URL เพื่อเปลี่ยนเส้นทางไปยังเส้นทางที่เปิดใช้งาน
- ข้อมูล : ข้อมูลคงที่เพื่อกำหนดเส้นทาง
- แก้ : ข้อมูลแบบไดนามิกเพื่อแก้ไขและรวมกับ ข้อมูล เมื่อได้รับการแก้ไข
- เด็ก : เส้นทางเด็ก
แอพพลิเคชันของเราใช้งานได้ง่ายและมีเพียงสองเส้นทางที่พี่น้อง แต่โปรแกรมขนาดใหญ่อาจมีการกำหนดค่าเราเตอร์ด้วยเส้นทางย่อยเช่น
เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: 'todos',เด็ก: [{เส้นทาง: ''คอมโพเนนต์: 'TodosPageComponent'}{เส้นทาง: ': id',คอมโพเนนต์: 'TodoPageComponent'}]}];
ในกรณีที่
todos
มีลูกสองเส้นทางและ: id
เป็นพารามิเตอร์เส้นทางทำให้เราเตอร์รู้จัก URL ต่อไปนี้:
/
: โฮมเพจเปลี่ยนเส้นทางไปที่/ todos
/ todos
: เปิดใช้งานTodosPageComponent
และแสดงรายการสิ่งที่ต้องทำ/ todos / 1
: เปิดใช้งานTodoPageComponent
และกำหนดค่าของ: id
เป็น1
/ todos / 2
: เปิดใช้งานTodoPageComponent
และกำหนดค่าของ: id
เป็น2
patchMatch: 'full' เมื่อกำหนดการเปลี่ยนเส้นทาง
Semalt router มีสองกลยุทธ์การจับคู่:
- คำนำหน้า : ค่าเริ่มต้นตรงกับเมื่อ URL เริ่มต้นด้วย ค่าของ
เส้นทาง
- เต็ม : จับคู่เมื่อ URL เท่ากับ ค่าของ
เส้นทาง
ถ้าเราสร้างเส้นทางต่อไปนี้:
// ไม่ระบุพาธModeดังนั้นเราท์เตอร์แบบแองเจิลใช้// pathMatch คำนำหน้า 'ดีฟอลต์'{เส้นทาง: ''redirectTo: 'todos'}
และทุก URL ถูกเปลี่ยนเส้นทางไปที่
todos
เนื่องจากทุก URL เริ่มต้นด้วย สตริงที่ว่างเปล่า' '
ที่ระบุไว้ในเส้นทาง
pathMatch: 'full' เพื่อให้แน่ใจว่าเฉพาะ URL ที่ เท่ากับ สตริงที่ว่างเปล่า
''
ถูกจับคู่:{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าเส้นทางที่แตกต่างออกไปโปรดดูเอกสารเกี่ยวกับการกำหนดเส้นทางและการนำทางอย่างเป็นทางการ
สุดท้ายเราสร้างและส่งออกโมดูลแบบมุม
AppRoutingModule
:@NgModule ({การนำเข้า: [RouterModule forRoot (เส้นทาง)]การส่งออก: [RouterModule],ผู้ให้บริการ: []})ส่งออกชั้น AppRoutingModule {}
semalt เป็นสองวิธีในการสร้างโมดูลการกำหนดเส้นทาง:
RouterModule forRoot (route)
: สร้างโมดูลการกำหนดเส้นทางที่มีคำสั่ง router, การกำหนดเส้นทาง และ บริการเราเตอร์RouterModule forChild (routes)
: สร้างโมดูลการกำหนดเส้นทางที่มีคำสั่ง router, การกำหนดเส้นทาง แต่ไม่ บริการเราเตอร์
RouterModule ต้องใช้เมธอด forChild
เมื่อแอ็พพลิเคชันของคุณมีโมดูลการกำหนดเส้นทางหลายแบบ. บริการเราเตอร์ Semalt หลายตัวที่โต้ตอบกับ URL เบราว์เซอร์เดียวกันจะนำไปสู่ปัญหาดังนั้นจึงจำเป็นที่จะมีเพียงหนึ่งอินสแตนซ์ของบริการเราเตอร์ในแอ็พพลิเคชันของเราไม่ว่าเราจะนำเข้าโมดูลการกำหนดเส้นทางกี่รายการในแอ็พพลิเคชันของเราเมื่อเรานำเข้าโมดูลการกำหนดเส้นทางที่สร้างโดยใช้
RouterModule forRoot
, Angular จะสร้างอินสแตนซ์ของบริการเราเตอร์ เมื่อเรานำเข้าโมดูลการกำหนดเส้นทางที่สร้างโดยใช้RouterModule forChild
, Angular จะ ไม่ใช่ สร้างอินสแตนซ์ของบริการเราเตอร์ดังนั้นเราจึงสามารถใช้
RouterModule เท่านั้น forRoot
ครั้งและใช้RouterModule forChild
หลายครั้งสำหรับโมดูลการกำหนดเส้นทางเพิ่มเติมเนื่องจากแอ็พพลิเคชันของเรามีเพียงหนึ่งโมดูลการกำหนดเส้นทางเราใช้
RouterModule forRoot
:การนำเข้า: [RouterModule forRoot (เส้นทาง)]
RouterModule ในทรัพย์สิน
การส่งออก
:การส่งออก: [RouterModule]
AppModule
เมื่อAppModule
การนำเข้าAppRoutingModule
AppRoutingModule ของเรา เราจำเป็นต้องนำเข้าไปใน AppModule
ของเรา
เพื่อเปิดใช้งานการนำเข้าการกำหนดค่าเส้นทาง
เพื่อนำเข้าการกำหนดค่าเส้นทางของเราไปยังแอพพลิเคชันของเราเราต้องนำเข้า AppRoutingModule
AppModule หลัก
ของเรา
ขอเปิด
src / app / app โมดูล. ts
และเพิ่มAppRoutingModule
ไปยังimport
array ในAppModule
's@NgModule
metadata:นำเข้า {BrowserModule} จาก '@ angular / platform-browser';นำเข้า {NgModule} จาก "@ angular / core";นำเข้า {FormsModule} จาก '@ angular / forms';นำเข้า {HttpModule} จาก "@ angular / http ';นำเข้า {AppComponent} จาก ' / แอป องค์ประกอบ ';นำเข้า {TodoListComponent} จาก ' / สิ่งที่ต้องทำรายการ / สิ่งที่ต้องทำรายการ องค์ประกอบ ';นำเข้า {TodoListFooterComponent} จาก ' / สิ่งที่ต้องทำรายการท้าย / สิ่งที่ต้องทำรายการส่วนท้าย องค์ประกอบ ';นำเข้า {TodoListHeaderComponent} จาก ' / สิ่งที่ต้องทำรายการส่วนหัว / สิ่งที่ต้องทำรายการส่วนหัว องค์ประกอบ ';นำเข้า {TodoDataService} จาก ' / สิ่งที่ต้องทำข้อมูล บริการ';นำเข้า {TodoListItemComponent} จาก ' / สิ่งที่ต้องทำรายการรายการ / สิ่งที่ต้องทำรายการรายการ องค์ประกอบ ';นำเข้า {ApiService} จาก ' / API บริการ';นำเข้า {AppRoutingModule} จาก " / แอปเส้นทาง โมดูล';@NgModule ({ประกาศ: [AppComponent,TodoListComponent,TodoListFooterComponent,TodoListHeaderComponent,TodoListItemComponent]การนำเข้า: [AppRoutingModule,BrowserModule,FormsModule,HttpModule]ผู้ให้บริการ: [TodoDataService, ApiService],bootstrap: [AppComponent]})ส่งออกชั้น AppModule {}
AppRoutingModule
มีRoutingModule
ที่ระบุในคุณสมบัติการส่งออกของ Angular จะนำเข้า
ของแอ็พพลิเคชันRoutingModule
โดยอัตโนมัติเมื่อเรานำเข้าAppRoutingModule
ดังนั้นเราจึงไม่จำเป็นต้องนำเข้าRouterModule
อีกครั้ง (แม้ว่าจะไม่ทำอันตรายใด ๆ )Semalt เราสามารถลองการเปลี่ยนแปลงของเราในเบราว์เซอร์เราต้องทำขั้นตอนที่สามและขั้นสุดท้าย
การเพิ่มเต้าเสียบสำหรับรับ
แม้ว่าแอ็พพลิเคชันของเราตอนนี้มีการกำหนดค่าการกำหนดเส้นทางแล้ว แต่เรายังต้องบอกเราเตอร์แบบแอมพลิเคชั่นซึ่งจะสามารถวางคอมโพเนนต์ที่สร้างขึ้นมาไว้ใน DOM ได้
AppComponent
AppModule
: เมื่อแอ็พพลิเคชันของเรามีการบูตระบบ@NgModule ({// .
เท่านั้นที่จะแสดงผลได้ .องค์ประกอบ
บอกเราเตอร์แบบแอมพลิเคชั่นซึ่งจะสามารถสร้างอินทิเกรตส่วนประกอบใน DOM ได้
router-outlet> เราเตอร์แบบแองกูลาร์จะไม่ทราบว่าควรจะวางคอมโพเนนต์ไว้ที่ใดและมีเพียง HTML ของ AppComponentถ้าคุณคุ้นเคย AngularJS 1. เราเตอร์ x และ UI-Router คุณสามารถพิจารณา
มุมมองเชิงมุม
router-outlet> ng-view
และui-view
แต่แทนที่จะให้
AppComponent
กำลังแสดงรายการสิ่งที่ต้องทำAppComponent
แสดงรายการของสิ่งที่ต้องทำตอนนี้เราต้องการAppComponent
ให้มี
router-outlet> AppComponent
เพื่อแสดงรายการสิ่งที่ต้องทำเพื่อให้บรรลุสิ่งนี้ให้สร้างคอมโพเนนต์ใหม่
TodosComponent
โดยใช้ Angular CLI:$ ng สร้างส่วนประกอบ Todos
และย้าย HTML ทั้งหมดจาก
src / app / app ส่วนประกอบ html
ถึงsrc / app / todos / todos ส่วนประกอบ html
:
<การตรวจสอบสิ่งที่ต้องทำรายการส่วนหัว(เพิ่ม) = "onAddTodo ($ event)"> แอปสิ่งที่ต้องทำรายการหัว><การตรวจสอบสิ่งที่ต้องทำรายการ[Todos] = "to-do"(toggleComplete) = "onToggleTodoComplete ($ event)"(ถอด) = "onRemoveTodo ($ event)"> แอปสิ่งที่ต้องทำรายการ><การตรวจสอบสิ่งที่ต้องทำรายการส่วนท้าย[Todos] = "to-do"> แอปสิ่งที่ต้องทำรายการท้าย> ส่วน> และตรรกะทั้งหมดจาก
src / app / app ส่วนประกอบ ts
ถึงsrc / app / todos / todos ส่วนประกอบ ts
:/ * src / app / todos / todos ส่วนประกอบ ts * /นำเข้า {Component, OnInit} จาก '@ angular / core';นำเข้า {TodoDataService} จาก ' . / สิ่งที่ต้องทำข้อมูล บริการ';นำเข้า {Todo} จาก ' . /ทำ';@Component ({selector: 'app-todos',templateUrl: '. / Todos ส่วนประกอบ HTML'styleUrls: ['. / Todos ส่วนประกอบ CSS']ผู้ให้บริการ: [TodoDataService]})ชั้นการส่งออก TodosComponent ใช้ OnInit {todos: Todo [] = [];คอนสตรัค (todoDataService ส่วนตัว: TodoDataService) {}public ngOnInit {นี้. todoDataService getAllTodos สมัครสมาชิก ((todos) => {นี้. todos = todos;});}onAddTodo (todo) {นี้. todoDataService addTodo (สิ่งที่ต้องทำ) สมัครสมาชิก ((newTodo) => {นี้. todos = นี้ Todos concat (newTodo);});}onToggleTodoComplete (สิ่งที่ต้องทำ) {นี้. todoDataService toggleTodoComplete (สิ่งที่ต้องทำ) สมัครสมาชิก ((updatedTodo) => {todo = updatedTodo;});}onRemoveTodo (todo) {นี้. todoDataService deleteTodoById (todo. id) สมัครสมาชิก ((_) => {นี้. todos = นี้ Todos กรอง ((t) => t. id! == todo. id);});}}
ตอนนี้เราสามารถแทนที่แม่แบบของ AppComponent
ใน src / app / app ได้ ส่วนประกอบ html
ด้วย:<เต้ารับเต้าเสียบ> router-outlet>
และลบรหัสล้าสมัยทั้งหมดออกจาก
AppComponent
ในคลาสsrc / app / app ส่วนประกอบ ts
:นำเข้า {Component} จาก '@ angular / core';@Component ({selector: 'app-root',templateUrl: '. / แอป ส่วนประกอบ HTML'styleUrls: ['. / แอป ส่วนประกอบ CSS']})ส่งออกชั้น AppComponent {}
ขั้นตอนสุดท้ายเราปรับปรุงเส้นทาง
todos
ของเราในsrc / app / app-routing โมดูล.
Semalt ลองการเปลี่ยนแปลงของเราในเบราเซอร์
Semalt เซิร์ฟเวอร์การพัฒนาและ API แบ็กเอนด์ของคุณโดยการเรียกใช้:
$ ng ให้บริการ$ npm run json-server
และไปที่เบราเซอร์ของคุณไปที่
http: // localhost: 4200
เราท์เตอร์มุมมองอ่านการกำหนดค่าเราเตอร์และเปลี่ยนเส้นทางเบราว์เซอร์โดยอัตโนมัติเป็น
คุณจะเห็นว่าhttp: // localhost: 4200 / todos
TodosComponent
ไม่ได้รับการแสดงผลภายในแต่อยู่ติดกับ มัน:
router-outlet> <เตอร์เต้าเสียบ> เราเตอร์เต้าเสียบ><แอป-to-do> แอป-to-do> แอปราก>
แอปพลิเคชันของเราตอนนี้เปิดใช้งานการกำหนดเส้นทางแล้ว น่ากลัว!
การเพิ่มเส้นทางตัวแทน
เมื่อคุณเลื่อนเบราเซอร์ไปที่
http: // localhost: 4200 / unmatched-url
และคุณเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราเซอร์คุณจะสังเกตเห็นว่าเราเตอร์แบบ Angular บันทึกข้อผิดพลาดต่อไปนี้ไปยังคอนโซล:ข้อผิดพลาด: ไม่สามารถจับคู่เส้นทางใดก็ได้ URL Segment: 'URL ที่ไม่ตรงกัน'
เพื่อจัดการกับความสง่างามที่ไม่เหมือนใครเราต้องทำสองสิ่ง:
- สร้าง
PageNotFoundComponent
(คุณสามารถตั้งชื่อใหม่ได้หากต้องการ) เพื่อแสดงข้อความที่เป็นมิตรซึ่งไม่สามารถหาเพจที่ต้องการได้- บอกเราเตอร์แบบ Angular เพื่อแสดง
PageNotFoundComponent
เมื่อไม่มีเส้นทางตรงกับ URL ที่ร้องขอเริ่มต้นด้วยการสร้าง
PageNotFoundComponent
โดยใช้ Angular CLI:$ ng สร้างส่วนประกอบ PageNotFound
และแก้ไขเทมเพลตใน
src / app / page-not-found / page-not-found ส่วนประกอบ html
:
ขออภัยหน้าเว็บที่ขอไม่พบ
จากนั้นเราเพิ่มเส้นทางตัวแทนโดยใช้
**
เป็นเส้นทาง:เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: 'todos',คอมโพเนนต์: AppComponent}{เส้นทาง: '**'คอมโพเนนต์: PageNotFoundComponent}];
**
ตรงกับ URL ใด ๆ รวมถึงเส้นทางเด็กตอนนี้ถ้าคุณเลื่อนเบราเซอร์ไปที่
http: // localhost: 4200 / unmatched-url
,PageNotFoundComponent
จะปรากฏขึ้นSemalt ว่าเส้นทาง wildcard จะต้องเป็นเส้นทางสุดท้ายในการกำหนดเส้นทางของเราเพื่อให้สามารถทำงานได้ตามที่คาดหมาย
เมื่อ Semalt router ตรงกับ URL ที่ร้องขอไปยังการกำหนดค่าเราเตอร์จะหยุดประมวลผลทันทีที่พบการจับคู่ครั้งแรก
ดังนั้นหากเราเปลี่ยนลำดับของเส้นทางไป
เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: '**'คอมโพเนนต์: PageNotFoundComponent}{เส้นทาง: 'todos',คอมโพเนนต์: AppComponent}];
แล้ว
todos
จะไม่สามารถเข้าถึงได้และPageNotFoundComponent
จะปรากฏขึ้นเนื่องจากเส้นทาง wildcard จะถูกจับคู่เป็นอันดับแรกเราได้ทำอะไรมามากมายแล้วเราจะสรุปได้อย่างรวดเร็วว่าเราทำได้ดีแค่ไหน:
- เราตั้งค่าเราเตอร์ Angular
- เราสร้างการกำหนดเส้นทางการกำหนดเส้นทางสำหรับแอ็พพลิเคชันของเรา
- เราได้ปรับโฉมใหม่
AppComponent
toTodosComponent
- เราเพิ่ม
ถึง
router-outlet> เทมเพลต AppComponent
- เราเพิ่มเส้นทางตัวแทนเพื่อจัดการกับ URL ที่ไม่ตรงกัน
จากนั้นเราจะสร้างตัวแก้ไขเพื่อเรียกใช้สิ่งที่ต้องทำที่มีอยู่จาก API แบ็กเอนด์โดยใช้ Semalt router.
ขณะนี้เมื่อเรานำทางเบราว์เซอร์ของเราไปที่ URL
todos
ดังต่อไปนี้:
- เราเตอร์แบบแอ็คชั่นตรงกับ URL
todos
- เราเตอร์แบบแอ็คชั่นจะเปิดใช้งาน
TodosComponent
TodosComponent
ที่อยู่ติดกับใน DOM
router-outlet> TodosComponent
จะปรากฏในเบราเซอร์ที่มีสิ่งที่ต้องทำว่างเปล่า- TodoComponent ของ TodoComponent
TodoComponent
ของ TodoComponent จะถูกเรียกใช้จาก API ในตัวจัดการngOnInit
TodosComponent
ได้รับการอัปเดตในเบราว์เซอร์ที่เรียกใช้งานจาก APIถ้าการโหลดสิ่งที่ต้องทำในขั้นตอนที่ 5 ใช้เวลา 3 วินาทีผู้ใช้จะได้รับรายการสิ่งที่ต้องทำที่ว่างเปล่าเป็นเวลา 3 วินาทีก่อนที่จะแสดงสิ่งที่ต้องทำจริงในขั้นตอนที่ 6
หาก TodosComponent
มี HTML ต่อไปนี้ในเทมเพลต:
ngIf = "! todos. length">ขณะนี้คุณยังไม่มีสิ่งที่ต้องทำเลยผู้ใช้จะเห็นข้อความนี้เป็นเวลา 3 วินาทีก่อนที่จะมีการแสดงสิ่งที่ต้องทำจริงซึ่งอาจทำให้ผู้ใช้หลงผิดและทำให้ผู้ใช้ล้วงข้อมูลก่อนที่ข้อมูลจริงจะเข้ามา
เราสามารถเพิ่ม loader ลงในTodosComponent
ที่แสดงเครื่องปั่นด้ายได้ขณะที่กำลังโหลดข้อมูล แต่บางครั้งเราอาจไม่มีการควบคุมส่วนประกอบที่แท้จริงเช่นเมื่อเราใช้ส่วนประกอบของบุคคลที่สามเพื่อแก้ไขพฤติกรรมที่ไม่พึงประสงค์นี้เราจำเป็นต้องมีสิ่งต่อไปนี้:
- เราเตอร์แบบแอ็คชั่นตรงกับ URL
todos
- เราเตอร์แบบแองกูลาเรียกใช้สิ่งที่ต้องทำจาก API
- เราเตอร์แบบแอ็คชั่นจะเปิดใช้งาน
TodosComponent
TodosComponent
ที่อยู่ติดกับใน DOM
router-outlet> - TodosComponent
จะปรากฏในเบราเซอร์ที่มีการเรียกค้นจาก API
TodosComponent ไม่ปรากฏจนกว่าข้อมูลจากส่วนหลัง API ของเราจะพร้อมใช้งาน
นั่นคือสิ่งที่ผู้แก้ปัญหาสามารถทำเพื่อเราได้
เพื่อให้เราเตอร์ Angular แก้ไขสิ่งที่ต้องทำก่อนที่จะเปิดใช้งาน TodosComponent
เราต้องทำสองสิ่งดังนี้
- สร้าง
TodosResolver
ที่ดึงข้อมูลสิ่งที่ต้องทำจาก APITodosComponent
TodosResolver
เพื่อดึงข้อมูลสิ่งที่ต้องทำเมื่อเปิดใช้งาน TodosComponent
TodosResolver
เมื่อติดตั้งตัวแก้ปัญหาเข้ากับเส้นทาง
todos
เราขอให้เราเตอร์ Angular ทำการแก้ไขข้อมูลก่อนTodosComponent
ลองสร้างเครื่องแก้ปัญหาเพื่อเรียกค้นสิ่งที่ต้องทำของเรา
การสร้าง TodosResolver
Angular CLI ไม่มีคำสั่งในการสร้างตัวแก้ปัญหาดังนั้นเรามาสร้างไฟล์ใหม่
src / todos จำแนก ts
ด้วยตนเองและเพิ่มรหัสต่อไปนี้นำเข้า {Injectable} จาก '@ angular / core';นำเข้า {ActivatedRouteSnapshot, แก้ไข, RouterStateSnapshot} จาก '@ angular / router';นำเข้า {Observable} จาก 'rxjs / Observable';นำเข้า {Todo} จาก ' /ทำ';นำเข้า {TodoDataService} จาก ' / สิ่งที่ต้องทำข้อมูล บริการ';@Injectable export class TodosResolver ดำเนินการแก้ไข
> {คอนสตรัค (todoDataService ส่วนตัว: TodoDataService) {}แก้ปัญหาสาธารณะ (เส้นทาง: ActivatedRouteSnapshot,สถานะ: RouterStateSnapshot): Observable {คืนนี้ todoDataService getAllTodos ;}} เรากำหนด resolver เป็นคลาสที่ใช้อินเตอร์เฟซ
แก้ไข
ส่วนติดต่อ
ถ้าวิธีการแก้ไข
เป็นทางเลือก แต่อนุญาตให้ IDE แบบอักษรหรือคอมไพเลอร์ของ TypeScript ช่วยให้มั่นใจว่าเราใช้คลาสนี้อย่างถูกต้องโดยกำหนดให้เราใช้วิธีแก้ไขresolve
.แก้
ส่งกลับคำสัญญาหรือเราท์เตอร์มุมมองที่สังเกตได้จะรอคำมั่นสัญญาหรือสามารถสังเกตได้ก่อนที่จะเริ่มใช้งานส่วนประกอบของเส้นทางเมื่อใช้วิธีการ
resolve
เราเตอร์แบบแอนะล็อกจะส่งผ่านข้อมูลพร็อพเพอร์ตี้ของเส้นทางที่เปิดใช้งานและข้อมูลสถานะของเราเตอร์เพื่อให้เราสามารถเข้าถึงข้อมูล (เช่นพารามิเตอร์เส้นทางหรือพารามิเตอร์การค้นหา) เพื่อแก้ไขข้อมูลTodosResolver มีความกระชับเนื่องจากเรามี TodoDataService
ที่จัดการการติดต่อสื่อสารทั้งหมดกับแบ็กเอนด์ API ของเรา
TodoDataService ในคอนสตรัคเตอร์และใช้เมธอด
getAllTodos
เพื่อดึงข้อมูลสิ่งที่ต้องทำทั้งหมดในเมธอดresolve
Todo [] ดังนั้นเราท์เตอร์แบบแองเกิลจะรอจนกว่าการดำเนินการของเส้นทางจะเสร็จสมบูรณ์
ตอนนี้เรามีตัวแก้ปัญหาแล้วเราจะกำหนดค่า Semalt router เพื่อใช้งานได้
แก้ไขปัญหาที่ต้องทำผ่านทางเราเตอร์
เพื่อให้ Semalt router ใช้ Resolver เราต้องแนบเส้นทางดังกล่าวกับเส้นทางในการกำหนดเส้นทางของเรา
ขอเปิด
src / app-routing โมดูล. ts
และเพิ่ม TodosResolverลงในเส้นทาง
todos
:นำเข้า {NgModule} จาก "@ angular / core";นำเข้า {RouterModule, Routes} จาก '@ angular / router';นำเข้า {PageNotFoundComponent} จาก ' / หน้าไม่พบ / หน้าไม่พบ- องค์ประกอบ ';นำเข้า {TodosComponent} จาก ' / Todos / Todos องค์ประกอบ ';นำเข้า {TodosResolver} จาก ' / Todos จำแนก ';เส้นทาง const: Routes = [{เส้นทาง: ''redirectTo: 'todos',pathMatch: 'เต็ม'}{เส้นทาง: 'todos',คอมโพเนนต์: TodosComponent,แก้ไข: {todos: TodosResolver}}{เส้นทาง: '**'คอมโพเนนต์: PageNotFoundComponent}];@NgModule ({การนำเข้า: [RouterModule forRoot (เส้นทาง)]การส่งออก: [RouterModule],ผู้ให้บริการ: [TodosResolver]})ส่งออกชั้น AppRoutingModule {}
เรานำเข้า
TodosResolver
:นำเข้า {TodosResolver} จาก ' / Todos จำแนก ';
และเพิ่มเป็นเครื่องแก้ไขเส้นทาง
todos
:{เส้นทาง: 'todos',คอมโพเนนต์: TodosComponent,แก้ไข: {todos: TodosResolver}}
บอกเราเตอร์ Angular เพื่อแก้ไขข้อมูลโดยใช้
TodosResolver
และกำหนดค่าส่งคืนของ Resolver ตามtodos
ในข้อมูลเส้นทางข้อมูลเส้นทางสามารถเข้าถึงได้จาก
ActivatedRoute
หรือActivatedRouteSnapshot