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 相关文章推荐
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
ThinkPHP分页实例
2014/10/15 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery事件对象总结
2016/10/17 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Python字典底层实现原理详解
2019/12/18 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
一套Delphi的笔试题二
2013/05/11 面试题
经贸韩语专业大学生职业规划
2014/02/14 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
放假通知怎么写
2015/08/18 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA