为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板。

在这一步您将会在一个html页面中添加两部手机的基本信息。

  ·这个页面现在包含一个有两部手机的基本信息名单。

最重要的不同被列在了下面,您可以点击这里在GitHub上查看全部的不同。

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页面中添加一些东西吧,比如:

<p>Total number of phones: 2</p>

总结

您应用中新增了静态html来展示列表,让我们进入下一步看怎样使用AngularJS动态生成相同的列表。

[Angular Tutorial] 1-Static Template的更多相关文章

  1. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  2. [Angular Tutorial] 3-Components

    在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...

  3. [Angular Tutorial] 7-XHRs & Dependency Injection

    我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...

  4. [Angular Tutorial] 14 -Animations

    在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...

  5. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  6. [Angular Tutorial] 12 -Event Handlers

    在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...

  7. [Angular Tutorial] 11 -Custom Filters

    在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...

  8. [Angular Tutorial] 10 -More Templating

    在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现 ...

  9. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

随机推荐

  1. PL/SQL developer 管理多套数据库

    PL/SQL developer 管理多套数据库,作为一个统一的接口平台,连接多套数据库. 1.. 1.类SQL PLUS窗口:File->New->Command Window,这个类似 ...

  2. oracle数据库兼容mysql的差异写法

    1.sysdate改为sysdate(),或者now(); 2.nvl(expr1,expr2) 改为IFNULL(expr1,expr2) nvl2(expr1,expr2,expr3)改为 IF( ...

  3. 核心动画 CAAnimation 进阶

    转载自:http://www.cofcool.net/development/2015/06/20/ios-study-note-nine-CoreAnimation/ Core Animation, ...

  4. MyBatis基础用法(一)

    <select id="getErrorTimes" resultType="Integer"> SELECT ErrorTimes FROM `e ...

  5. webapp之路--之ios上图标

    以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...

  6. Android Wi-Fi Display(Miracast)介绍

    地址:http://blog.csdn.net/innost/article/details/8474683 Android Wi-Fi Display(Miracast)介绍 2012年11月中旬, ...

  7. javascript的 replace() 方法的使用讲解

    String.prototype.replace() The replace() method returns a new string with some or all matches of a p ...

  8. Protocol buffers--python 实践(一) 简介以及安装与使用

    由于最近对grpc产生了浓厚的兴趣,但是那是一整套东西,看了一下用到的东西不少,所以抽丝剥茧先写写这几天调研的protocol buffer -python的收获. 简介: 以下引用自官方首页文档: ...

  9. vs 2012svn 插件设置

  10. deb安装了些啥?

    http://www.cyberciti.biz/faq/view-contents-of-deb-file/