Back to Question Center
0

บทนำเกี่ยวกับ Routing Component ด้วย Router มุม            บทนำเกี่ยวกับ Routing Component ด้วย Angular Router หัวข้อที่เกี่ยวข้อง: JavaScriptnpmTools แบบดิบ & Semalt

1 answers:
บทนำสู่ Component Routing ด้วย Router มุม

บทความนี้เป็นส่วนที่ 4 ของ SitePoint Angular 2+ Tutorial เกี่ยวกับวิธีสร้างแอป CRUD ด้วย CLI เชิงมุม


  1. ส่วนที่ 0 - The Ultimate Angular CLI Reference Guide
  2. ตอนที่ 1 - การเรียกใช้แอพพลิเคชั่น Todo รุ่นแรก
  3. ส่วนที่ 2- การสร้างส่วนประกอบแยกเพื่อแสดงรายการของสิ่งที่ต้องทำและสิ่งที่ต้องทำเดียว
  4. ส่วนที่ 3 - อัปเดตบริการ Todo เพื่อสื่อสารกับ REST API
  5. ส่วนที่ 4 ใช้เราเตอร์มุมเพื่อแก้ไขข้อมูล
  6. ส่วนที่ 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:

glass top outdoor setting. http: // localhost: 4200 และแอปพลิเคชันของเราไม่รู้จัก URL อื่น ๆ เช่น http: // localhost: 4200 / todos

แอปพลิเคชันเว็บส่วนใหญ่จำเป็นต้องสนับสนุน URL ต่างๆเพื่อนำทางผู้ใช้ไปยังหน้าต่างๆในแอพพลิเคชัน นั่นคือที่ที่เราเตอร์เข้ามา

ในเว็บไซต์แบบดั้งเดิมการกำหนดเส้นทางจะได้รับการจัดการโดยเราเตอร์บนเซิร์ฟเวอร์:

  1. ผู้ใช้คลิกที่ลิงค์ในเบราว์เซอร์ทำให้ URL เปลี่ยน
  2. เบราเซอร์จะส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์
  3. เซิร์ฟเวอร์จะอ่าน URL จากคำขอ HTTP และสร้างการตอบสนอง HTTP ที่เหมาะสม
  4. เซิร์ฟเวอร์จะส่งการตอบสนอง HTTP ไปยังเบราเซอร์

ในแอพพลิเคชันเว็บ Semalt สมัยใหม่การกำหนดเส้นทางมักใช้โดยเราเตอร์ Semalt ในเบราเซอร์

เราเตอร์ JavaScript คืออะไร?

ในสาระสำคัญเราเตอร์ Semalt ทำ 2 สิ่ง:

  1. อัปเดตสถานะแอปพลิเคชันบนเว็บเมื่อ URL เบราว์เซอร์เปลี่ยน
  2. อัปเดต 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 ประการดังนี้

  1. สร้างการกำหนดเส้นทางการกำหนดเส้นทางที่กำหนดสถานะที่เป็นไปได้สำหรับแอ็พพลิเคชันของเรา
  2. นำเข้ากำหนดค่าเส้นทางไปยังแอพพลิเคชั่นของเรา
  3. เพิ่มเต้าเสียบเราเตอร์เพื่อบอกเราเตอร์แบบแอมพลิเคชั่นที่จะวางส่วนประกอบที่เปิดใช้งานไว้ใน DOM

ให้เริ่มต้นด้วยการสร้างการกำหนดค่าเส้นทาง

การสร้างการกำหนดเส้นทางการกำหนดเส้นทาง

ในการสร้างการกำหนดค่าเส้นทางเราจำเป็นต้องมีรายการ URL ที่เราต้องการให้แอปพลิเคชันของเราสนับสนุน

Semalt, โปรแกรมของเราง่ายมากและมีเพียงหน้าเดียวที่แสดงรายการสิ่งที่ต้องทำ:

  • / : แสดงรายการสิ่งที่ต้องทำ

ซึ่งจะแสดงรายการสิ่งที่ต้องทำเป็นหน้าแรกของแอ็พพลิเคชันของเรา

อย่างไรก็ตามเมื่อบุ๊กมาร์กผู้ใช้ / ในเบราว์เซอร์ของพวกเขาเพื่อดูรายการสิ่งที่ต้องทำและเราเปลี่ยนเนื้อหาของหน้าแรกของเรา (ซึ่งเราจะทำในตอนที่ 5 ของชุดข้อมูลนี้) บุ๊กมาร์กของพวกเขาจะไม่มี อีกต่อไปแสดงรายการสิ่งที่ต้องทำ

ดังนั้นให้เราทำรายการที่ต้องทำของเรา URL ของตัวเองและเปลี่ยนเส้นทางหน้าแรกของเราไป:

  • / : redirect to / todos
  • / todos : แสดงรายการสิ่งที่ต้องทำ

สิ่งนี้ทำให้เรามีประโยชน์สองประการ:

    / todos แทน / ซึ่งจะทำงานต่อไปได้ตามที่คาดไว้แม้ว่าเราจะเปลี่ยนเนื้อหาของโฮมเพจ เมื่อผู้ใช้บุ๊คมาร์คหน้า todos เบราว์เซอร์จะบุ๊กมาร์ก
  • ตอนนี้เราสามารถเปลี่ยนหน้าแรกของเราได้ง่ายๆโดยเปลี่ยนเส้นทางไปยัง URL ที่เราชอบซึ่งสะดวกหากคุณต้องการเปลี่ยนเนื้อหาหน้าแรกอย่างสม่ำเสมอ

คำแนะนำสไตล์เชิงมุมอย่างเป็นทางการขอแนะนำให้จัดเก็บการกำหนดค่าเส้นทางสำหรับโมดูล 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 เป็นสองวิธีในการสร้างโมดูลการกำหนดเส้นทาง:

  1. RouterModule forRoot (route) : สร้างโมดูลการกำหนดเส้นทางที่มีคำสั่ง router, การกำหนดเส้นทาง และ บริการเราเตอร์
  2. 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 ได้

ถ้าคุณคุ้นเคย AngularJS 1. เราเตอร์ x และ UI-Router คุณสามารถพิจารณา มุมมองเชิงมุม ng-view และ ui-view

เราเตอร์แบบแองกูลาร์จะไม่ทราบว่าควรจะวางคอมโพเนนต์ไว้ที่ใดและมีเพียง HTML ของ AppComponent
เท่านั้นที่จะแสดงผลได้ .

AppComponent กำลังแสดงรายการสิ่งที่ต้องทำ

แต่แทนที่จะให้ AppComponent แสดงรายการของสิ่งที่ต้องทำตอนนี้เราต้องการ AppComponent ให้มี 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 ด้วย:

   <เต้ารับเต้าเสียบ>       

และลบรหัสล้าสมัยทั้งหมดออกจาก 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 ไม่ได้รับการแสดงผลภายใน แต่อยู่ติดกับ มัน:

   <เตอร์เต้าเสียบ> <แอป-to-do>     

แอปพลิเคชันของเราตอนนี้เปิดใช้งานการกำหนดเส้นทางแล้ว น่ากลัว!

การเพิ่มเส้นทางตัวแทน

เมื่อคุณเลื่อนเบราเซอร์ไปที่ http: // localhost: 4200 / unmatched-url และคุณเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราเซอร์คุณจะสังเกตเห็นว่าเราเตอร์แบบ Angular บันทึกข้อผิดพลาดต่อไปนี้ไปยังคอนโซล:

     ข้อผิดพลาด: ไม่สามารถจับคู่เส้นทางใดก็ได้ URL Segment: 'URL ที่ไม่ตรงกัน'    

เพื่อจัดการกับความสง่างามที่ไม่เหมือนใครเราต้องทำสองสิ่ง:

  1. สร้าง PageNotFoundComponent (คุณสามารถตั้งชื่อใหม่ได้หากต้องการ) เพื่อแสดงข้อความที่เป็นมิตรซึ่งไม่สามารถหาเพจที่ต้องการได้
  2. บอกเราเตอร์แบบ 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 to TodosComponent
  • เราเพิ่ม ถึง เทมเพลต AppComponent
  • เราเพิ่มเส้นทางตัวแทนเพื่อจัดการกับ URL ที่ไม่ตรงกัน

จากนั้นเราจะสร้างตัวแก้ไขเพื่อเรียกใช้สิ่งที่ต้องทำที่มีอยู่จาก API แบ็กเอนด์โดยใช้ Semalt router.

ขณะนี้เมื่อเรานำทางเบราว์เซอร์ของเราไปที่ URL todos ดังต่อไปนี้:

  1. เราเตอร์แบบแอ็คชั่นตรงกับ URL todos
  2. เราเตอร์แบบแอ็คชั่นจะเปิดใช้งาน TodosComponent
  3. TodosComponent ที่อยู่ติดกับ ใน DOM
  4. TodosComponent จะปรากฏในเบราเซอร์ที่มีสิ่งที่ต้องทำว่างเปล่า
  5. TodoComponent ของ TodoComponent TodoComponent ของ TodoComponent จะถูกเรียกใช้จาก API ในตัวจัดการ ngOnInit
  6. TodosComponent ได้รับการอัปเดตในเบราว์เซอร์ที่เรียกใช้งานจาก API

ถ้าการโหลดสิ่งที่ต้องทำในขั้นตอนที่ 5 ใช้เวลา 3 วินาทีผู้ใช้จะได้รับรายการสิ่งที่ต้องทำที่ว่างเปล่าเป็นเวลา 3 วินาทีก่อนที่จะแสดงสิ่งที่ต้องทำจริงในขั้นตอนที่ 6

หาก TodosComponent มี HTML ต่อไปนี้ในเทมเพลต:

   
ngIf = "! todos. length">ขณะนี้คุณยังไม่มีสิ่งที่ต้องทำเลย

ผู้ใช้จะเห็นข้อความนี้เป็นเวลา 3 วินาทีก่อนที่จะมีการแสดงสิ่งที่ต้องทำจริงซึ่งอาจทำให้ผู้ใช้หลงผิดและทำให้ผู้ใช้ล้วงข้อมูลก่อนที่ข้อมูลจริงจะเข้ามา

เราสามารถเพิ่ม loader ลงใน TodosComponent ที่แสดงเครื่องปั่นด้ายได้ขณะที่กำลังโหลดข้อมูล แต่บางครั้งเราอาจไม่มีการควบคุมส่วนประกอบที่แท้จริงเช่นเมื่อเราใช้ส่วนประกอบของบุคคลที่สาม

เพื่อแก้ไขพฤติกรรมที่ไม่พึงประสงค์นี้เราจำเป็นต้องมีสิ่งต่อไปนี้:

  1. เราเตอร์แบบแอ็คชั่นตรงกับ URL todos
  2. เราเตอร์แบบแองกูลาเรียกใช้สิ่งที่ต้องทำจาก API
  3. เราเตอร์แบบแอ็คชั่นจะเปิดใช้งาน TodosComponent
  4. TodosComponent ที่อยู่ติดกับ ใน DOM
  5. TodosComponent จะปรากฏในเบราเซอร์ที่มีการเรียกค้นจาก API

TodosComponent ไม่ปรากฏจนกว่าข้อมูลจากส่วนหลัง API ของเราจะพร้อมใช้งาน

นั่นคือสิ่งที่ผู้แก้ปัญหาสามารถทำเพื่อเราได้

เพื่อให้เราเตอร์ Angular แก้ไขสิ่งที่ต้องทำก่อนที่จะเปิดใช้งาน TodosComponent เราต้องทำสองสิ่งดังนี้

  1. สร้าง TodosResolver ที่ดึงข้อมูลสิ่งที่ต้องทำจาก API
  2. TodosComponent 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

March 1, 2018