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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
Element Notification通知的实现示例
Jul 27 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进程之间实现共享内存的方法
2014/06/13 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Swiper自定义分页器使用详解
2017/12/28 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
js判断密码强度的方法
2020/03/18 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
python进度条显示之tqmd模块
2020/08/22 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
材料化学应届生求职信
2013/10/09 职场文书
开展读书活动总结
2014/06/30 职场文书
移交协议书
2014/08/19 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
超市食品安全承诺书
2015/04/29 职场文书
Vue如何清空对象
2022/03/03 Vue.js
pytorch中的 .view()函数的用法介绍
2022/03/17 Python