ในขั้นตอนนี้คุณจะได้เรียนรู้วิธีสร้างเทมเพลตเลย์เอาต์และสร้างแอปพลิเคชันที่มีหลายมุมมองผ่านฟังก์ชั่นการกำหนดเส้นทาง
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -7
โปรดสังเกตว่าตอนนี้เมื่อคุณไปที่ App/Index.html คุณจะถูกเปลี่ยนเส้นทางไปยัง App/Index.html#/โทรศัพท์และรายการโทรศัพท์เดียวกันจะปรากฏในเบราว์เซอร์ เมื่อคุณคลิกที่ลิงค์มือถือรายการรายละเอียดโทรศัพท์มือถือจะปรากฏขึ้น
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 6 และขั้นตอนที่ 7 อยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
เทมเพลตหลายมุมมองการกำหนดเส้นทางและเค้าโครง
แอปพลิเคชันของเรากำลังพัฒนาอย่างช้าๆและซับซ้อนขึ้น ก่อนขั้นตอนที่ 7 แอปพลิเคชันจะให้อินเทอร์เฟซแบบง่าย ๆ แก่ผู้ใช้ของเราเท่านั้น (รายการโทรศัพท์ทั้งหมด) และรหัสเทมเพลตทั้งหมดจะอยู่ในไฟล์ index.html ขั้นตอนต่อไปคือการเพิ่มหน้าเว็บที่แสดงรายละเอียดของโทรศัพท์แต่ละเครื่องในรายการของเรา
ในการเพิ่มมุมมองรายละเอียดเราสามารถขยาย index.html เพื่อรวมรหัสเทมเพลตสำหรับทั้งสองมุมมองในเวลาเดียวกัน แต่สิ่งนี้จะทำให้เรามีปัญหาอย่างมาก แต่เราต้องแปลงเทมเพลต html index.html เป็น "เทมเพลตเลย์เอาต์" นี่เป็นเทมเพลตทั่วไปสำหรับเราในการใช้มุมมองทั้งหมด "เทมเพลตเลย์เอาต์ท้องถิ่น" อื่น ๆ จะถูกกรอกข้อมูลตาม "การกำหนดเส้นทาง" ในปัจจุบันจึงสร้างมุมมองที่สมบูรณ์เพื่อแสดงต่อผู้ใช้
เส้นทางที่ใช้ใน AngularJS นั้นถูกประกาศผ่าน $ RouteProvider ซึ่งเป็นผู้ให้บริการ $ Route Service บริการนี้ช่วยให้สามารถรวมตัวควบคุมได้ง่ายเทมเพลตและ URL ของเบราว์เซอร์ปัจจุบัน ด้วยการใช้คุณสมบัตินี้เราสามารถใช้การเชื่อมโยงลึกซึ่งช่วยให้เราสามารถใช้ประวัติเบราว์เซอร์ (ย้อนหลังหรือการนำทางไปข้างหน้า) และบุ๊กมาร์ก
เกี่ยวกับการฉีดพึ่งพา (DI) หัวฉีดและผู้ให้บริการ
เมื่อคุณเรียนรู้จากก่อนหน้านี้การฉีดพึ่งพาอาศัยกันเป็นคุณสมบัติหลักของ AngularJs ดังนั้นคุณต้องรู้เล็กน้อยเกี่ยวกับวิธีการทำงานของผู้ชายคนนี้
เมื่อแอปพลิเคชันบู๊ทส์ AngularJS จะสร้างหัวฉีดซึ่งบริการทั้งหมดที่ต้องการทั้งหมดที่ถูกฉีดหลังจากแอปพลิเคชันของเรา หัวฉีดตัวนี้ไม่ทราบว่า $ http และ $ route ทำอะไร ในความเป็นจริงเว้นแต่จะได้รับการกำหนดค่าในระหว่างการกำหนดโมดูลมันไม่ทราบการมีอยู่ของบริการเหล่านี้เลย ความรับผิดชอบเพียงอย่างเดียวของหัวฉีดคือการโหลดโมดูลบริการที่ระบุลงทะเบียนผู้ให้บริการที่กำหนดทั้งหมดในโมดูลเหล่านี้และการพึ่งพาการฉีด (บริการ) ลงในฟังก์ชั่นที่ระบุเมื่อจำเป็น การพึ่งพาเหล่านี้ถูกสร้างอินสแตนซ์โดยผู้ให้บริการ "ขี้เกียจ" (โหลดถ้าจำเป็น)
ผู้ให้บริการเป็นวัตถุที่ให้ (สร้าง) อินสแตนซ์บริการและให้อินเทอร์เฟซ API ภายนอก มันสามารถใช้ในการควบคุมการสร้างและพฤติกรรมรันไทม์ของบริการ สำหรับบริการ $ Route นั้น $ RouteProvider ให้อินเทอร์เฟซ API ไปยังโลกภายนอกช่วยให้คุณสามารถกำหนดกฎการกำหนดเส้นทางสำหรับแอปพลิเคชันของคุณผ่านส่วนต่อประสาน API
โมดูล AngularJS แก้ปัญหาสองข้อในการลบสถานะทั่วโลกออกจากแอปพลิเคชันและให้วิธีการในการกำหนดค่าหัวฉีด ซึ่งแตกต่างจาก AMD หรือ require.js (สองไลบรารีที่ไม่ใช่ AngularJs) โมดูล AngularJS ไม่ได้พยายามที่จะแก้ปัญหาคำสั่งโหลดสคริปต์และการโหลดสคริปต์ขี้เกียจ เป้าหมายเหล่านี้ไม่มีส่วนเกี่ยวข้องกับปัญหาที่ AngularJs ต้องการแก้ไขดังนั้นโมดูลเหล่านี้สามารถอยู่ร่วมกันเพื่อให้บรรลุเป้าหมายที่เกี่ยวข้อง
โมดูลแอพ
แอพ/js/app.js
Angular.module ('phonecat', []) config (['$ routeProvider', ฟังก์ชั่น ($ routeProvider) {$ routeProvider. เมื่อ ('/โทรศัพท์', {templateurl: 'partials/phone-list.html', คอนโทรลเลอร์: phonelistctrl}) เมื่อ ('/โทรศัพท์/: โทรศัพท์' PhoneDetailctrl})ในการกำหนดค่าการกำหนดเส้นทางสำหรับแอปพลิเคชันของเราเราจำเป็นต้องสร้างโมดูลสำหรับแอปพลิเคชัน เราเรียกโมดูลนี้ phonecat และโดยใช้ configapi เราขอให้ $ routeProvider ถูกฉีดลงในฟังก์ชั่นการกำหนดค่าของเราและใช้ $ routeProvider.whenapi เพื่อกำหนดกฎการกำหนดเส้นทางของเรา
โปรดทราบว่าในระหว่างขั้นตอนการกำหนดค่าหัวฉีดผู้ให้บริการสามารถฉีดได้ในเวลาเดียวกัน แต่เมื่อสร้างหัวฉีดและอินสแตนซ์บริการเริ่มต้นขึ้นพวกเขาจะไม่ถูกเรียกคืนโดยโลกภายนอกอีกต่อไป
กฎการกำหนดเส้นทางของเราหมายถึงดังนี้
เมื่อเซ็กเมนต์แผนที่ URL คือ /โทรศัพท์มุมมองรายการโทรศัพท์มือถือจะปรากฏขึ้น ในการสร้างมุมมองนี้ AngularJS ใช้เทมเพลตโทรศัพท์. html และคอนโทรลเลอร์ phonelistctrl
เมื่อเซ็กเมนต์แผนที่ URL คือ /โทรศัพท์ /: phoneId มุมมองรายละเอียดโทรศัพท์จะปรากฏขึ้น ที่นี่: PhoneId เป็นส่วนตัวแปรของ URL เพื่อสร้างมุมมองโดยละเอียดของโทรศัพท์ AngularJS ใช้แม่แบบ detail.html และคอนโทรลเลอร์โทรศัพท์
เรานำคอนโทรลเลอร์ phonelistctrl กลับมาใช้ใหม่ที่เราสร้างขึ้นมาก่อนและในเวลาเดียวกันเราเพิ่มตัวควบคุมการโทรศัพท์แบบใหม่ในมุมมองโดยละเอียดของโทรศัพท์และเก็บไว้ในไฟล์แอพ/js/js/controllers.js
คำสั่ง $ route.otherwise ({redirectto: ' /phone'}) ทำให้การเปลี่ยนเส้นทางไปยัง /โทรศัพท์จะถูกเรียกใช้เมื่อที่อยู่เบราว์เซอร์ไม่สามารถจับคู่กฎการกำหนดเส้นทางของเราได้
โปรดทราบว่าในการประกาศเส้นทางที่สอง: การใช้พารามิเตอร์ PHONEID บริการ $ Route ใช้การประกาศการกำหนดเส้นทาง /โทรศัพท์ /: โทรศัพท์ ID เป็นเทมเพลตที่ตรงกับ URL ปัจจุบัน ตัวแปรทั้งหมดที่ประกาศด้วย: สัญลักษณ์ (ที่นี่ตัวแปรคือโทรศัพท์) จะถูกสกัดและเก็บไว้ในวัตถุ $ routeparams
เพื่อให้แอปพลิเคชันของเราเป็นแนวทางในโมดูลที่สร้างขึ้นใหม่ของเราเราจำเป็นต้องระบุชื่อของโมดูลเกี่ยวกับค่าของคำสั่ง NGAPP:
App/index.html
<! doctype html> <html lang = "en" ng-app = "phonecat"> ...
ผู้ควบคุม
แอพ/js/controllers.js
... ฟังก์ชั่น phoneedetailctrl ($ scope, $ routeparams) {$ scope.phoneid = $ routeparams.phoneid;} // phoneedetailctrl. $ inject = ['$ scope', '$ routeparams'];เทมเพลต
บริการ $ Route มักจะใช้กับ NGVIEW Directive บทบาทของ NGVIEW Directive คือการโหลดเทมเพลตมุมมองที่สอดคล้องกันลงในเทมเพลตเลย์เอาต์สำหรับเส้นทางปัจจุบัน
App/index.html
<html lang = "en" ng-app = "phonecat"> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/app.js"> </script> <script src = "js/controllers.js" ng-view> </div> </body> </html>
โปรดทราบว่าเราลบรหัสส่วนใหญ่ในเทมเพลต index.html และเราวางคอนเทนเนอร์ <div> เท่านั้นซึ่งมีแอตทริบิวต์ NG-View ตอนนี้รหัสที่เราลบถูกวางไว้ในเทมเพลตโทรศัพท์. html:
แอพ/partials/phone-list.html
<div> <div> <div> <!-เนื้อหาแถบด้านข้าง-> การค้นหา: <อินพุต ng-model = "query"> เรียงลำดับ: <เลือก ng-model = "orderprop"> <ตัวเลือกค่า = "ชื่อ"> ตัวอักษร </option> <opturation value = "Age" ตัวกรอง: คำถาม | <p> {{phone.snippet}} </p> </li></ul> </div> </div> </div>ในเวลาเดียวกันเราเพิ่มเทมเพลตตัวยึดไว้ในมุมมองรายละเอียดโทรศัพท์มือถือ
แอพ/partials/phone-detail.html
tbd: มุมมองรายละเอียดสำหรับ {{phoneId}}
ขอให้สังเกตว่าเทมเพลตเลย์เอาต์ของเรายังไม่ได้เพิ่มคุณสมบัติคอนโทรลเลอร์ PhoneListCtrl หรือ PhoneDetailCtrl!
ทดสอบ
ในการตรวจสอบโดยอัตโนมัติว่าทุกอย่างรวมอยู่ด้วยกันเราจำเป็นต้องเขียนการทดสอบแบบ end-to-end นำทางไปยัง URL ที่แตกต่างกันและตรวจสอบว่ามุมมองที่ถูกต้องจะแสดงผล
... มัน ('ควรเปลี่ยนเส้นทาง index.html ไปยัง index.html#/โทรศัพท์', function () {เบราว์เซอร์ (). navigateto ('../../ app/index.html'); คาดหวัง (เบราว์เซอร์ (). เบราว์เซอร์ (). navigateto ('../../ app/index.html#/โทรศัพท์/nexus-s');ตอนนี้คุณสามารถรีเฟรชเบราว์เซอร์ของคุณและเรียกใช้การทดสอบแบบ end-to-end อีกครั้งหรือคุณสามารถเรียกใช้บนเซิร์ฟเวอร์ AngularJS
ฝึกฝน
ลองเพิ่ม {{orderprop}} เชื่อมโยงกับ index.html และไม่มีอะไรเปลี่ยนแปลงเมื่อคุณอยู่ในมุมมองรายการโทรศัพท์ของคุณ นี่เป็นเพราะโมเดล OrderProp สามารถมองเห็นได้ภายใต้ขอบเขตของการจัดการ phonelistctrl ซึ่งเกี่ยวข้องกับองค์ประกอบ <div ng-view> หากคุณเพิ่มการเชื่อมโยงเดียวกันกับเทมเพลตโทรศัพท์. html เทมเพลตการเชื่อมโยงจะแสดงผลตามที่คุณจินตนาการ
สรุป
หลังจากตั้งค่าเส้นทางและใช้มุมมองรายการโทรศัพท์มือถือเราสามารถดำเนินการต่อไปยังขั้นตอนที่ 8 เพื่อใช้มุมมองรายละเอียดโทรศัพท์มือถือได้แล้ว
ข้างต้นคือการจัดเรียงการกำหนดเส้นทาง AngularJS และข้อมูลหลายมุมมองและเราจะยังคงเพิ่มความรู้ที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!