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>
總結(jié)
本步驟往應用中添加了靜態(tài)HTML手機列表, 現(xiàn)在讓我們轉(zhuǎn)到步驟2以了解如何使用AngularJS動態(tài)生成相同的列表。
相關(guān)文章
詳解使用KeyValueDiffers檢測Angular對象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測Angular對象的變化使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04angularJS實現(xiàn)動態(tài)添加,刪除div方法
下面小編就為大家分享一篇angularJS實現(xiàn)動態(tài)添加,刪除div方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02angularjs中使用ng-bind-html和ng-include的實例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04使用angular-cli webpack創(chuàng)建多個包的方法
這篇文章主要介紹了使用angular-cli webpack創(chuàng)建多個包的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能,通過第三方控件來實現(xiàn),感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧2015-10-10angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實例
今天小編就為大家分享一篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09