เทมเพลตเพิ่มเติมสำหรับการสอนเบื้องต้น

ในขั้นตอนนี้คุณจะใช้มุมมองรายละเอียดโทรศัพท์ซึ่งจะปรากฏขึ้นเมื่อผู้ใช้คลิกบนโทรศัพท์ในรายการโทรศัพท์

โปรดรีเซ็ตไดเรกทอรีการทำงาน:

git checkout -f step -8

ตอนนี้เมื่อคุณคลิกที่โทรศัพท์ในรายการหน้าข้อมูลโดยละเอียดของโทรศัพท์จะปรากฏขึ้น

เพื่อที่จะใช้มุมมองรายละเอียดโทรศัพท์มือถือเราจะใช้ $ http เพื่อรับข้อมูลและเราจะเพิ่มเทมเพลตมุมมองโทรศัพท์ detail.html

ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 7 และขั้นตอนที่ 8 อยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub

ข้อมูล

นอกเหนือจาก phone.json แล้วแอพ/ โทรศัพท์/ ไดเรกทอรียังมีไฟล์ JSON สำหรับข้อมูลโทรศัพท์มือถือแต่ละรายการ

แอพ/โทรศัพท์/nexus-s.json (ตัวอย่างตัวอย่าง)

 {"เพิ่มเติมฟีทู": "จอแสดงผล Contour, ใกล้สนามสื่อสาร (NFC), ... ", "Android": {"OS": "Android 2.3", "ui": "Android"}, ... "IMG/โทรศัพท์/nexus-s.2.jpg", "IMG/โทรศัพท์/nexus-s.3.jpg"], "Storage": {"Flash": "16384MB", "RAM": "512MB"}}}

แต่ละไฟล์เหล่านี้อธิบายคุณสมบัติที่แตกต่างกันของโทรศัพท์โดยใช้โครงสร้างข้อมูลเดียวกัน เราแสดงข้อมูลนี้ในมุมมองรายละเอียดโทรศัพท์

ผู้ควบคุม

เราใช้บริการ $ http เพื่อรับข้อมูลเพื่อขยาย phonelistctrl ของเรา นี่เป็นวิธีเดียวกับที่คอนโทรลเลอร์รายการโทรศัพท์ก่อนหน้าทำงาน

แอพ/js/controllers.js

 ฟังก์ชั่น phoneedetailctrl ($ scope, $ routeparams, $ http) {$ http.get ('โทรศัพท์/' + $ routeparams.phoneid + '.json'). ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {$ scope.phone = data;});} // phonedetailctrl

ในการสร้าง URL ของคำขอ HTTP เราจำเป็นต้องแยก $ routeparams.PhoneID จากเส้นทางปัจจุบันที่จัดทำโดยบริการ $

เทมเพลต

บรรทัดตัวยึด TBD ดั้งเดิมในไฟล์ de-detail.html ถูกแทนที่ด้วยรายการและการเชื่อมโยงที่ถือเป็นข้อมูลรายละเอียดของโทรศัพท์ โปรดทราบว่าที่นี่เราใช้แท็ก {{Expression}} ของ AngularJS และ ngrepeat เพื่อแสดงผลโมเดลข้อมูลในมุมมอง

แอพ/partials/phone-detail.html

 <img ng-src = "{{phone.images [0]}}"> <h1> {{phone.name}} </h1> <p> {{phone.description}} </p> <ul> </li></ul> <ul> <li> <pan> ความพร้อมใช้งานและเครือข่าย </span> <dl> <dt> ความพร้อมใช้งาน </dt> <dd ng-repeat = "ความพร้อมใช้งานในโทรศัพท์การใช้งาน"> {{ความพร้อมใช้งาน}} <dd> {{phone.additionalfeatures}} </dd> </li></ul>

ทดสอบ

ลองเขียนการทดสอบหน่วยใหม่ซึ่งคล้ายกับที่เราเขียนสำหรับ phonelistctrl ในขั้นตอนที่ 5

ทดสอบ/หน่วย/controllersspec.js

 ... อธิบาย ('phoneedetailctrl', function () {var scope, $ httpbackend, ctrl; ก่อนหน้า (inject (ฟังก์ชั่น (_ $ httpbackend_, $ rootscope, $ routparams, $ controller) {$ httpbackend = _ $ httpbackend_; $ httpbackend.expectget ('โทรศัพท์/xyz.json') ตอบสนอง (ชื่อ: 'โทรศัพท์ xyz'}); คาดหวัง (โทรศัพท์) .Tobeundefined ();

เรียกใช้สคริปต์ ./scripts/test.sh เพื่อดำเนินการทดสอบคุณควรดูผลลัพธ์ต่อไปนี้:

 Chrome: Runner Reset .... การทดสอบทั้งหมด 3 ครั้ง (ผ่าน: 3; Fails: 0; ข้อผิดพลาด: 0) (5.00 ms) Chrome 19.0.1084.36 Mac OS: Run 3 การทดสอบ (ผ่าน: 3; Fails: 0; ข้อผิดพลาด 0) (5.00 ms)

ในเวลาเดียวกันเรายังเพิ่มการทดสอบแบบ end-to-end ชี้ไปที่หน้ารายละเอียดโทรศัพท์ของ Nexus และตรวจสอบว่าหัวของหน้าคือ "Nexus s"

ทดสอบ/e2e/scenarios.js

 ... อธิบาย ('มุมมองรายละเอียดโทรศัพท์', function () {beforeach (function () {browser (). navigateto ('../../ app/index.html#/โทรศัพท์/nexus-s');}); มัน ('ควรแสดงหน้า nexus-s);

ตอนนี้คุณสามารถรีเฟรชเบราว์เซอร์ของคุณและเรียกใช้การทดสอบแบบ end-to-end อีกครั้งหรือคุณสามารถเรียกใช้บนเซิร์ฟเวอร์ AngularJS

ฝึกฝน

เขียนการทดสอบโดยใช้ API การทดสอบแบบ end-to-end AngularJS เพื่อตรวจสอบรูปขนาดย่อสี่รูปที่เราแสดงในหน้ารายละเอียดของ Nexus

สรุป

ตอนนี้หน้ารายละเอียดโทรศัพท์มือถือพร้อมแล้วในขั้นตอนที่ 9 เราจะได้เรียนรู้วิธีการเขียนตัวกรองการแสดงผล

ข้างต้นคือข้อมูลเกี่ยวกับเทมเพลต AngularJS เพิ่มเติม เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!