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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 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类
2008/04/09 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python 字符串定义
2009/09/25 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python join方法使用详解
2019/07/30 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
学习交流会主持词
2014/04/01 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
2015年班组工作总结
2015/04/20 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
PHP中strval()函数实例用法
2021/06/07 PHP
使用Java去实现超市会员管理系统
2022/03/18 Java/Android