AngularJS 靜態(tài)模版

靜態(tài)模版

為了說(shuō)明AngularJS如何增強(qiáng)了標(biāo)準(zhǔn)HTML，我們先將創(chuàng)建一個(gè)靜態(tài)HTML頁(yè)面模板，然后把這個(gè)靜態(tài)HTML頁(yè)面模板轉(zhuǎn)換成能動(dòng)態(tài)顯示的AngularJS模板。

在本步驟中，我們往HTML頁(yè)面中添加兩個(gè)手機(jī)的基本信息，用以下命令將工作目錄重置到步驟1。

    git checkout -f step-1

請(qǐng)編輯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)到m3uc1jta.html以了解如何使用AngularJS動(dòng)態(tài)生成相同的列表。