为了说明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. iis配置,客户端可以下载apk,或者播放视频

    1.选中网站,在右侧找到iis中的MINE类型 2.点击最右侧的添加按钮,提示输入扩展名 3. apk:在弹出的添加窗口里的文件扩展名输入:APK在MIME类型输入:application/vnd.a ...

  2. emacs format

    格式化源码是很常见的需求,emacs有个indent-region函数用于格式化选定的代码,前提是你处在某个非text mode下,如c-mode或者java-mode之类.如果要格式化整个文件,你需 ...

  3. zf-安徽桐城关于(资源中心-数据录入)上传文件后没有进行处理Excel文件的原因

    上传的文件 是会自动复制到另外一个路径的 如果没有进行处理 那么表示那个路径并没有那个文件 这样就会卡死 导致之后的文件都不会进行处理(后台有个变量是从数据库里获得文件路径的),所以需要去数据库 执行 ...

  4. VIEWCONTROLLER的启动流程

    转载自:http://sunnyyoung.net/post/ios/2015-04-22-viewcontrollerde-qi-dong-liu-cheng-yu-jie-xi VIEWCONTR ...

  5. Python异常处理体系

    1.Python内建异常体系结构 The class hierarchy for built-in exceptions is: BaseException  +-- SystemExit  +-- ...

  6. Android网络开发之OkHttp--基本用法POST

    1.OkHttp框架使用了OkIo框架,不要忘记下OkIo.jar 2.通过POST访问网络,和通过GET访问网络基本相同,多了设置请求参数的过程.主要分为五步: (1).声明并实例化一个OkHttp ...

  7. springMVC文件上传优化

    1. 新建web project 2. 填 jar,注意新加入两个上传文件的jar, commons-io, commons-fileupload 3. 改写web.xml <?xml vers ...

  8. IFieldEdit Interface 接口

    Description The IFieldEdit interface is used when creating new fields. You should not use it to modi ...

  9. vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .  最近WWDC放出终极大招——新的编程语言Swift(雨燕),导致一大波程序员的 ...

  10. mssql数据库syscolumns表中xtype列

    xtype    类型34 image35 text36 uniqueidentifier48 tinyint52 smallint56 int58 smalldatetime59 real60 mo ...