為了說明angularJS如何增強(qiáng)了標(biāo)準(zhǔn)HTML,我們先將創(chuàng)建一個(gè)靜態(tài)HTML頁面模板,然后把這個(gè)靜態(tài)HTML頁面模板轉(zhuǎn)換成能動(dòng)態(tài)顯示的AngularJS模板。
在本步驟中,我們往HTML頁面中添加兩個(gè)手機(jī)的基本信息,用以下命令將工作目錄重置到步驟1。
~~~
git checkout -f step-1
~~~
請編輯app/index.html文件,將下面的代碼添加到index.html文件中,然后運(yùn)行該應(yīng)用查看效果。
app/index.html
~~~
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM? with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
~~~
## 練習(xí)
嘗試添加多個(gè)靜態(tài)HTML代碼到index.html, 例如:
~~~
<p>Total number of phones: 2</p>
~~~
## 總結(jié)
本步驟往應(yīng)用中添加了靜態(tài)HTML手機(jī)列表, 現(xiàn)在讓我們轉(zhuǎn)到[步驟2](a005)以了解如何使用AngularJS動(dòng)態(tài)生成相同的列表。
