AngularJS入门教程(一):静态模板


Posted in Javascript onDecember 06, 2014

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

Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
AngularJS入门教程之学习环境搭建
Dec 06 #Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 #Javascript
JavaScript实现twitter puddles算法实例
Dec 06 #Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 #Javascript
You might like
php 表单数据的获取代码
2009/03/10 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
神经网络python源码分享
2017/12/15 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
超市活动计划书
2014/04/24 职场文书
酒店管理求职信
2014/06/09 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
Oracle锁表解决方法的详细记录
2022/06/05 Oracle