AngularJS入门教程(一):静态模板


Posted in Javascript onDecember 06, 2014

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的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>

练习

尝试添加多个静态HTML代码到index.html, 例如:

<p>Total number of phones: 2</p>

总结

本步骤往应用中添加了静态HTML手机列表, 现在让我们转到步骤2以了解如何使用AngularJS动态生成相同的列表。

Javascript 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
AngularJS入门教程之学习环境搭建
Dec 06 #Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 #Javascript
You might like
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
php析构函数的具体用法小结
2014/03/11 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
会计专业应届生自荐信
2014/06/28 职场文书
验房委托书
2014/08/30 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
单位未婚证明范本
2014/11/25 职场文书
义诊活动总结
2015/02/04 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
工作犯错保证书
2015/05/11 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
任命书格式模板
2015/09/22 职场文书
体育部部长竞选稿
2015/11/21 职场文书