DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AngularJS入門教程(一):靜態模板
AngularJS入門教程(一):靜態模板
編輯:關於JavaScript     

為了說明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>
        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>

練習

嘗試添加多個靜態HTML代碼到index.html, 例如:

代碼如下:
<p>Total number of phones: 2</p>

總結

本步驟往應用中添加了靜態HTML手機列表, 現在讓我們轉到步驟2以了解如何使用AngularJS動態生成相同的列表。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved