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