เพื่อแสดงให้เห็นว่า AngularJS ช่วยเพิ่ม HTML มาตรฐานได้อย่างไรเราจะสร้างเทมเพลตหน้า HTML แบบคงที่จากนั้นแปลงเทมเพลตหน้า HTML แบบคงที่นี้เป็นเทมเพลต AngularJS ที่สามารถแสดงแบบไดนามิกได้
ในขั้นตอนนี้เราเพิ่มข้อมูลพื้นฐานของโทรศัพท์สองเครื่องลงในหน้า HTML และรีเซ็ตไดเรกทอรีการทำงานเป็นขั้นตอนที่ 1 ด้วยคำสั่งต่อไปนี้
git checkout -f step -1
โปรดแก้ไขไฟล์ App/index.html เพิ่มรหัสต่อไปนี้ลงในไฟล์ index.html จากนั้นเรียกใช้แอพเพื่อดูเอฟเฟกต์
App/index.html
<ul> <li> <pan> Nexus S </span> <p> เร็วเร็วขึ้นด้วย Nexus S. </p> </li> <li> <pan> Motorola Xoom ™พร้อม Wi-Fi </span> <p> แท็บเล็ตรุ่นต่อไป </p> </li> </ul>
ฝึกฝน
ลองเพิ่มรหัส HTML แบบคงที่หลายตัวลงใน index.html ตัวอย่างเช่น:
<p> จำนวนโทรศัพท์ทั้งหมด: 2 </p>
สรุป
ขั้นตอนนี้เพิ่มรายการโทรศัพท์ HTML แบบคงที่ลงในแอพตอนนี้ไปที่ขั้นตอนที่ 2 เพื่อทำความเข้าใจวิธีการสร้างรายการเดียวกันโดยใช้ AngularJS แบบไดนามิก
ข้างต้นคือข้อมูลที่แยกเทมเพลตแบบคงที่ของ AngularJs เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!