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 相关文章推荐
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
js实现验证码干扰(静态)
Feb 22 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学习笔记 数组的常用函数
2011/06/13 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python super的使用方法及实例详解
2019/09/25 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
上课迟到检讨书
2014/01/19 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
十佳党员事迹材料
2014/08/28 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
深入理解python协程
2021/06/15 Python