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框架myJSFrame附API使用帮助
Jun 28 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JS中Array数组学习总结
Jan 18 Javascript
javascript流程控制语句集合
Sep 18 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
详解django三种文件下载方式
2018/04/06 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python属于哪种语言
2020/08/16 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
国庆宣传标语
2014/06/30 职场文书
尊师重教演讲稿
2014/09/04 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis