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 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
JavaScript异步操作中串行和并行
Nov 20 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php 文件上传实例代码
2012/04/19 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
linux面试题参考答案(7)
2014/07/24 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
六一儿童节主持词
2014/03/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
旅游文化节策划方案
2014/06/06 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
小学教研工作总结2015
2015/05/13 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android