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中单选框和复选框获取值的方式
Nov 06 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
深入理解javascript中的this
Feb 08 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP实现验证码校验功能
2017/11/16 PHP
详解php命令注入攻击
2019/04/06 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python的argparse库使用详解
2018/10/09 Python
python3实现弹弹球小游戏
2019/11/25 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
公益广告宣传方案
2014/02/28 职场文书
安全技术说明书
2014/05/09 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
催款函怎么写
2015/06/24 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫