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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
js控制div弹出层实现方法
May 11 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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采集速度探究总结(原创)
2008/04/18 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
jQuery操作cookie
2016/08/08 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python判断两个对象相等的原理
2017/12/12 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
大学生村官事迹材料
2014/01/21 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
考试作弊检讨书
2014/10/21 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
居安思危观后感
2015/06/11 职场文书
观后感开头
2015/06/19 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
JavaScript流程控制(循环)
2021/12/06 Javascript