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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Vue组件化开发思考
Feb 02 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
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输入流php://input介绍
2012/09/18 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php封装的验证码类分享
2017/02/26 PHP
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python计算圆周率pi的方法
2015/07/11 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python enumerate内置库用法解析
2020/02/24 Python
python中time.ctime()实例用法
2021/02/03 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
普通党员自我剖析材料
2014/10/07 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python