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验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
微信小程序日期时间选择器使用方法
Feb 01 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 header()函数使用说明
2008/07/10 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php header函数的常用http头设置
2015/06/25 PHP
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python脚本处理空格的方法
2016/08/08 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
python实现二分查找算法
2017/09/21 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python下载库的步骤方法
2019/10/12 Python
python 字典访问的三种方法小结
2019/12/05 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
农救科工作职责
2013/11/27 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
高一英语教学反思
2014/01/22 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
2019军训心得体会
2019/06/27 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Java基础-封装和继承
2021/07/02 Java/Android
Python创建SQL数据库流程逐步讲解
2022/09/23 Python