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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
如何用threejs实现实时多边形折射
May 07 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关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
js获取class的所有元素
2013/03/28 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
开始着手第一个Django项目
2015/07/15 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python字典按照value排序方法
2020/12/28 Python
解释一下Windows的消息机制
2014/01/30 面试题
销售工作岗位职责
2013/12/24 职场文书
高二英语教学反思
2014/01/19 职场文书
小学教师国培感言
2014/02/08 职场文书
装饰活动策划方案
2014/02/11 职场文书
新文化运动的基本口号
2014/06/21 职场文书
加入学生会自荐书
2015/03/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python