AngularJS入门教程之静态模板详解


Posted in Javascript onAugust 18, 2016

为了说明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动态生成相同的列表。

以上就是AngularJS的静态模版的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
AngularJS入门教程引导程序
Aug 18 #Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 #Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 #Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
You might like
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP时间函数使用详解
2019/03/21 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python logging类库使用例子
2014/11/22 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python SOCKET编程基础入门
2021/02/27 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
座谈会主持词
2014/03/20 职场文书
个人考核材料
2014/05/15 职场文书
投资意向协议书
2015/01/29 职场文书
医者仁心观后感
2015/06/17 职场文书
自书遗嘱范文
2015/08/07 职场文书