AngularJS入門教程之靜態(tài)模板詳解
為了說明angularJS如何增強(qiáng)了標(biāo)準(zhǔn)HTML,我們先將創(chuàng)建一個(gè)靜態(tài)HTML頁面模板,然后把這個(gè)靜態(tài)HTML頁面模板轉(zhuǎn)換成能動態(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以了解如何使用AngularJS動態(tài)生成相同的列表。
以上就是AngularJS的靜態(tài)模版的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
- AngularJs Understanding Angular Templates
- AngularJS ng-bind-template 指令詳解
- AngularJS延遲加載html template
- AngularJS實(shí)現(xiàn)根據(jù)變量改變動態(tài)加載模板的方法
- AngularJS模板加載用法詳解
- AngularJS入門教程之更多模板詳解
- AngularJS入門教程之鏈接與圖片模板詳解
- AngularJS入門教程之AngularJS 模板
- AngularJS 路由和模板實(shí)例及路由地址簡化方法(必看)
- AngularJS初始化靜態(tài)模板詳解
- AngularJS入門教程(二):AngularJS模板
- AngularJS入門教程(一):靜態(tài)模板
- AngularJS ng-template寄宿方式用法分析
相關(guān)文章
Angularjs 實(shí)現(xiàn)分頁功能及示例代碼
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)分頁功能及示例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個(gè) JavaScript 框架。它可通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11Angular組件庫ng-zorro-antd實(shí)現(xiàn)radio單選框選擇
這篇文章主要為大家介紹了Angular組件庫ng-zorro-antd實(shí)現(xiàn)radio單選框取消選擇實(shí)現(xiàn)問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05angularJS實(shí)現(xiàn)動態(tài)添加,刪除div方法
下面小編就為大家分享一篇angularJS實(shí)現(xiàn)動態(tài)添加,刪除div方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下2017-01-01AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來定義模板的,當(dāng)使用ng-template定義好一個(gè)模板之后,可以用ng-container和templateOutlet指令來進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友參考下吧2018-08-08