鍍金池/ 教程/ HTML/ 靜態(tài)模版 - Static Template
完結(jié)篇 - The End
迭代器 - Filtering Repeaters
過濾器 - Filters
靜態(tài)模版 - Static Template
引導(dǎo)程序 - Bootstrapping
路由與多視圖 - Routing Multiple Views
動畫操作 - Applying Animations
導(dǎo)言
雙向綁定 - Two-way Data Binding
更多模版 - More Templating
連接與圖片模版- Templating Links Images
事件處理器 - Event Handlers
AngularJS 模版 - Angular Templates
XHR 和依賴注入 - XHRs Dependency Injection
REST 和定制服務(wù) - REST and Custom Services

靜態(tài)模版 - Static Template

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

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

    git checkout -f step-1

請編輯app/index.html文件,將下面的代碼添加到index.html文件中,然后運行該應(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í)

嘗試添加多個靜態(tài)HTML代碼到index.html, 例如:

    <p>Total number of phones: 2</p>

總結(jié)

本步驟往應(yīng)用中添加了靜態(tài)HTML手機列表, 現(xiàn)在讓我們轉(zhuǎn)到AngularJS模版以了解如何使用AngularJS動態(tài)生成相同的列表。