ในขั้นตอนนี้คุณจะเพิ่มรูปขนาดย่อและลิงก์บางส่วนไปยังรายการโทรศัพท์ แต่ลิงก์เหล่านี้จะยังไม่ทำงาน ถัดไปคุณจะใช้ลิงก์เหล่านี้เพื่อแสดงข้อมูลเพิ่มเติมบนโทรศัพท์ของคุณในหมวดหมู่
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -6
ตอนนี้คุณควรจะเห็นรูปภาพและลิงก์ของโทรศัพท์ของคุณในรายการ
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 5 และขั้นตอนที่ 6 อยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
ข้อมูล
โปรดทราบว่าตอนนี้ไฟล์ phones.json มีตัวระบุที่ไม่ซ้ำกันและลิงก์รูปภาพไปยังโทรศัพท์แต่ละเครื่อง ตอนนี้ URL เหล่านี้ชี้ไปที่แอพ/IMG/โทรศัพท์/ไดเรกทอรี
แอพ/โทรศัพท์/โทรศัพท์. json (ตัวอย่างตัวอย่าง)
[{... "id": "Motorola-Defy-With-Motoblur", "ImageUrl": "IMG/โทรศัพท์/motorola-defy-with-motoblur.0.jpg", "Name": "Motorola Defy/U2122 ด้วย Motoblur/U2122"เทมเพลต
App/index.html
... <ul> <li ng-repeat = "โทรศัพท์ในโทรศัพท์ | ตัวกรอง: การสืบค้น | orderby: orderprop"> <a href = "#/โทรศัพท์/{{phone.id}}"> <img ng-src = "{phone.imageurl}}"> href = "#/phone/{{phone.id}}"> {{phone.name}} </a> <p> {{phone.snippet}} </p> </li> </ul> ...ลิงค์เหล่านี้จะชี้ไปที่หน้ารายละเอียดของโทรศัพท์แต่ละเครื่องในอนาคต อย่างไรก็ตามเพื่อสร้างลิงก์เหล่านี้เราใช้การเชื่อมโยงข้อมูลสองครั้งที่เราคุ้นเคยอยู่แล้วในแอตทริบิวต์ HREF ในขั้นตอนที่ 2 เราเพิ่ม {{phone.name}} การเชื่อมโยงเป็นเนื้อหาองค์ประกอบ ในขั้นตอนนี้เราใช้การเชื่อมโยง {{phone.id}} ในแอตทริบิวต์องค์ประกอบ
นอกจากนี้เรายังเพิ่มรูปภาพโทรศัพท์มือถือในแต่ละระเบียนเพียงใช้ NGSRC Directive แทนแท็กแอตทริบิวต์ <IMG> SRC หากเราใช้แอตทริบิวต์ SRC ปกติเพื่อผูก (<img src = "{{phone.imageUrl}}">) เบราว์เซอร์จะตีความ AngularJs {{นิพจน์}} แท็กและเริ่มคำขอไปยัง urlhttp ที่ผิดกฎหมาย: // localhost: 8000 เนื่องจากเมื่อเบราว์เซอร์โหลดหน้าเว็บมันยังขอให้โหลดภาพ AngularJS จะเริ่มการรวบรวมเฉพาะเมื่อโหลดหน้า - เมื่อเบราว์เซอร์ร้องขอให้โหลดภาพ {{phone.imageUrl}} ยังไม่ได้รวบรวม! สถานการณ์นี้จะหลีกเลี่ยงกับคำสั่ง NGSRC นี้และเบราว์เซอร์จะใช้คำสั่ง NGSRC เพื่อป้องกันการร้องขอไปยังที่อยู่ที่ผิดกฎหมาย
ทดสอบ
ทดสอบ/e2e/scenarios.js
... มัน ('ควรแสดงลิงก์เฉพาะโทรศัพท์', function () {input ('query'). ป้อน ('nexus'); องค์ประกอบ ('. โทรศัพท์ li a'). คลิก (); คาดหวัง (เบราว์เซอร์ (). ตำแหน่ง (). url ()). tobe ('/โทรศัพท์/nexus-s');เราเพิ่มการทดสอบแบบ end-to-end ใหม่เพื่อตรวจสอบว่าแอพสร้างลิงก์ที่ถูกต้องสำหรับมุมมองมือถือและด้านบนคือการใช้งานของเรา
ตอนนี้คุณสามารถรีเฟรชเบราว์เซอร์ของคุณและใช้เครื่องทดสอบแบบ end-to-end เพื่อสังเกตการทดสอบที่ทำงานหรือคุณสามารถเรียกใช้บนเซิร์ฟเวอร์ AngularJS
ฝึกฝน
เปลี่ยนคำสั่ง NG-SRC เป็นแอตทริบิวต์ SRC ปกติ การใช้เครื่องมือเช่น Firebug, Chrome Web Inspector หรือดูบันทึกการเข้าถึงของเซิร์ฟเวอร์โดยตรงคุณจะพบว่าแอปพลิเคชันของคุณส่งคำขอที่ผิดกฎหมายไปยัง /App/%7B%7BPhone.ImageUrl%7D%7D (หรือ /App/ {{{โฟกัส ImageUrl})
ปัญหานี้เป็นเพราะเบราว์เซอร์จะส่งคำขอไปยังที่อยู่ URL ที่ยังไม่ได้รวบรวมเมื่อพบแท็ก IMG AngularJS จะเริ่มรวบรวมนิพจน์หลังจากโหลดหน้าเว็บเพื่อรับที่อยู่ URL รูปภาพที่ถูกต้อง
สรุป
ตอนนี้คุณได้เพิ่มรูปภาพโทรศัพท์และลิงก์ของคุณไปที่ขั้นตอนที่ 7 เราจะได้เรียนรู้เกี่ยวกับเทมเพลตเค้าโครง AngularJS และวิธีที่ AngularJS สามารถให้มุมมองหลายครั้งสำหรับแอปพลิเคชันของคุณได้อย่างง่ายดาย
ด้านบนเป็นการรวบรวมข้อมูลเกี่ยวกับลิงก์ AngularJS และเทมเพลตภาพ เราจะเพิ่มความรู้ที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!