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 相关文章推荐
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
JS编程小常识很有用
Nov 26 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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/16 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Python中方法链的使用方法
2016/02/23 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS