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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php如何连接sql server
2015/10/16 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
什么是Python中的匿名函数
2020/06/02 Python
为什么说python适合写爬虫
2020/06/11 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
春节晚会主持词
2014/03/24 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
机关工会工作总结2015
2015/05/26 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android