为了说明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. RPM -U 升级机制探索

    今天被RPM升级机制狠狠的阴了一把,差点没过来,趁着热乎赶紧记录下来,已被后用. RPM包有升级机制(Upgrade), 使用-U 参数.这点我之前略有耳闻,知道的并不详细. 先说说案例:半年前我们r ...

  2. CDH的几个包的下载地址

    https://archive.cloudera.com/cdh5/parcels/5.3.0/ http://archive.cloudera.com/cm5/installer/5.3.0/ ht ...

  3. Scala 深入浅出实战经典 第62讲:Scala中上下文界定内幕中的隐式参数实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  4. struts1+spring+myeclipse +cxf 开发webservice以及普通java应用调用webservice的实例

    Cxf + Spring+ myeclipse+ cxf 进行  Webservice服务端开发 使用Cxf开发webservice的服务端项目结构 Spring配置文件applicationCont ...

  5. log4j总结

    log4j介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器.UNIX Sysl ...

  6. AX2012 R3升级CU8的一些错误

    AX2012 R3安装升级包CU8后进入系统,系统会提示打开软件升级清单“Software update checklist”,清单列出了升级要做的一系列动作. 在进行到编译应用时“Compile a ...

  7. xsocks 64位平台下编译问题小记

    1.src/common/public.h uint32_t lpParameter 改为 void* lpParameter; 2.SocksMgr.cpp DWORD WINAPI CSocksM ...

  8. 安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误

    安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误 这个错误几个月以前解决过一次,但是到又碰到的时候,竟然完全忘记当时怎么解决的了, 看来上了年纪记忆真是越来越不行了... 解决方案很简单 ...

  9. ViewHolder模式超简洁写法

    ViewHolder是什么就不解释了.大家通常怎么写ViewHolder呢? ViewHolder holder = null; if (convertView == null) { convertV ...

  10. A Year Of Books - 2016 Javaer书单

    A Year Of Books - 2016 Javaer书单 (PS:欢迎留言推荐,很多来自白衣大哥的推荐) 1. OS & Networking <编码 : 隐匿在计算机软硬件背后的 ...