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