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 相关文章推荐
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python全局变量操作详解
2015/04/14 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python中数字是否为可变类型
2020/07/08 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
会计电算化应届生自荐信
2014/02/25 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书