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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 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并发访问实例代码
2012/09/06 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php和asp语法上的区别总结
2019/05/12 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue中使用sass实现换肤功能
2018/09/07 Javascript
使用JavaScript破解web
2018/09/28 Javascript
关于Python数据结构中字典的心得
2017/12/04 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python爬取网页信息的示例
2020/09/24 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
自我鉴定范文300字
2013/10/01 职场文书
工程业务员工作职责
2013/12/07 职场文书
《童年》教学反思
2014/02/18 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
小学节能减排倡议书
2014/05/15 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
工作证明英文模板
2014/10/21 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA