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

Angular系列----AngularJS入门教程02:静态模板(转载)的更多相关文章

  1. Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  2. Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  3. Angular系列----AngularJS入门教程00:引导程序(转载)

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  4. Angular系列----AngularJS入门教程04:迭代器过滤(转载)

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  5. Angular系列------AngularJS入门教程:导言和准备(转载)

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

  6. Angular系列----AngularJS入门教程05:双向绑定(转载)

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  7. [转载]AngularJS入门教程02:AngularJS模板

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  8. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  9. AngularJS入门教程:日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

随机推荐

  1. 隐藏nginx 版本号信息

    为了安全,想将http请求响应头里的nginx版本号信息隐藏掉: 1. nginx配置文件里增加 server_tokens off; server_tokens作用域是http server loc ...

  2. mysql in 排序

    SELECT * FROM my_table WHERE id IN (30, 20, 80, 40) ORDER BY FIELD(id, 30, 20, 80, 40);

  3. Xshell小技巧

    1. 鼠标右键粘贴 工具->选项->鼠标->向右按钮->(paste the clipboard contents.) 2. 选定文本自动复制到剪贴板 工具->选项-&g ...

  4. Android Audio控制和MediaButton远程控制(音视频控制配合)

    使用过Android系统的朋友应该都知道,Android里面声音是区分好几种情况,每种情况下的音频大小是独立的.也就是说你调节了电话铃声大小不会影响多媒体播放的声音大小.这个涉及了AudioStrea ...

  5. [Scheme]Understanding the Yin-Yang Puzzle

    这题目确实比较杀脑细胞... 原题: (let* ((yin ((lambda (cc) (display "@") cc) (call-with-current-continua ...

  6. Linux 求文件交集 差集等

    使用comm命令 假设两个文件FILE1和FILE2用集合A和B表示,FILE1内容如下: a b c e d a FILE2内容如下: c d a c 基本上有两个方法,一个是comm命令,一个是g ...

  7. 使用sphinx生成Python文档

    发现找不到matplotlib.sphinxext.mathmpl: 可以直接easy_install matplotlib,也可以去这里下载安装包 发现exception: matplotlib r ...

  8. android 模拟器

    参考:http://www.syscs.com/node/504 --skin WVGA800 - -no-boot-anim -wipe-: the dpi for the device you a ...

  9. [Z] Windows 8/10 audio编程

    都是些网上搜到的比较不错的文章.关于这块儿的内容网上帖子不多.出去下面列的最主要的还有参考MSDN. WASAPI使用介绍: https://blogs.windows.com/buildingapp ...

  10. POJ 3519 Minimal Backgammon

    Minimal Backgammon Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 1195   Accepted: 700 ...