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