【一起学AngularJS】第三章、静态模版

静态模版

为了让你充分感受Angular是如何增强标准的HTML的，我们将先创建一个静态的HTML页面，然后后面章节中再使用Angular增强它，看看Angular是如何动态展示各种数据的。

下面的实验步骤中，我们将在HTML页面中添加两部安卓手机的基本信息。
将代码切换到step-1分支，该分支的代码对应的HTML页面已经包含了手机信息列表，当然目前只有两部手机。
切换分支命令如下：

git checkout -f step-1

假设你已经成功运行了（没有话参照第二章），然后刷新你的浏览器就可以看到结果了。或者你可以点这里在线上看同样的效果。
以下是step-1和step-0分支的区别代码部分：
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>

实验小能手

可以自己试试往index.html中添加更多的静态信息，比如：

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

【注：这是在教我们熟悉HTML代码 :)】

总结

本章主要教大家如何使用静态页面显示手机信息列表。下一章中我们将演示如何动态的生成同样的手机信息列表。

原博客文章地址：http://www.tbwood.cn/articles/2016/03/07/1457322390421.html