快捷導(dǎo)航

AngularJS入門教程之靜態(tài)模板詳解

更新時(shí)間：2016年08月18日 14:51:12 作者：ZENSH

本文主要介紹AngularJS 靜態(tài)模板,這里整理了相關(guān)的基礎(chǔ)資料，會(huì)幫助大家學(xué)習(xí)基礎(chǔ)的AngularJS的基礎(chǔ)知識(shí)，有需要的小伙伴可以參考下

為了說(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)到步驟2以了解如何使用AngularJS動(dòng)態(tài)生成相同的列表。

以上就是AngularJS的靜態(tài)模版的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下
2017-03-03
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié)，本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗(yàn)，狀態(tài)管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-05-05
angula中使用iframe點(diǎn)擊后不執(zhí)行變更檢測(cè)的問(wèn)題
這篇文章主要介紹了angula中使用iframe點(diǎn)擊后不執(zhí)行變更檢測(cè)問(wèn)題，本文給大家分享解決方案，通過(guò)實(shí)例代碼給的大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-05-05
Angular6 發(fā)送手機(jī)驗(yàn)證碼按鈕倒計(jì)時(shí)效果實(shí)現(xiàn)方法
這篇文章主要介紹了Angular6 發(fā)送手機(jī)驗(yàn)證碼按鈕倒計(jì)時(shí)效果實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
angularjs性能優(yōu)化的方法
這篇文章主要介紹了angularjs性能優(yōu)化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
AngularJS基礎(chǔ) ng-keyup 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keyup 指令,這里對(duì)ng-keyup指令的基本資料進(jìn)行了整理,并且附有代碼示例,有需要的朋友可以看一下
2016-08-08
angular2+node.js express打包部署的實(shí)戰(zhàn)
本篇文章主要介紹了angular2+node.js express打包部署的實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
詳細(xì)分析使用AngularJS編程中提交表單的方式
這篇文章主要介紹了詳細(xì)分析使用AngularJS提交表單的方式,AngularJS是非常熱門的JavaScript庫(kù),文中展示了AngularJS在前端與后端的PHP進(jìn)行交互的場(chǎng)景,需要的朋友可以參考下
2015-06-06
深入理解Angular4訂閱(Subscribe)與取消
這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消，詳細(xì)的介紹了訂閱與取消的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11