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 日期时间函数(经典+完善+实用)
May 27 Javascript
Javascript倒计时代码
Aug 12 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
js实现自动播放匀速轮播图
Feb 06 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
浅析Python3 pip换源问题
2020/01/06 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
超市5.1促销活动
2014/01/15 职场文书
求职简历自我评价范例
2014/03/12 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
网络营销计划书
2015/01/17 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
sass 常用备忘案例详解
2021/09/15 HTML / CSS