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

[转载]AngularJS入门教程01:静态模板的更多相关文章

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

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

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

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

  3. [转载]AngularJS入门教程00:引导程序

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

  4. [转载]AngularJS入门教程04:双向绑定

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

  5. [转载]AngularJS入门教程03:迭代器

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

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

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

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

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

  8. 【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线

    [Zigbee技术入门教程-01]Zigbee无线组网技术入门的学习路线 广东职业技术学院  欧浩源 一.引言    在物联网技术应用的知识体系中,Zigbee无线组网技术是非常重要的一环,也是大家感 ...

  9. AngularJS 入门教程 $http is not defined 解决方案

    采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...

随机推荐

  1. Spark RDD(Resilient Distributed Dataset)

    基于数据集的处理:从物理存储上加载数据,然后操作数据,然后写入物理存储设备.比如Hadoop的MapReduce.        缺点:1.不适合大量的迭代  2. 交互式查询  3. 不能复用曾经的 ...

  2. App裂变活动多种玩法解析

    移动互联网时代,流量为王.在App获取流量的过程中,有资金的砸广告,没资金的铺渠道,但是不管你有钱没钱,社交平台都是必须重点争夺的流量阵地. 毕竟,截至2018年底,微信及WeChat的合并月活跃账户 ...

  3. 最大加权矩形 压缩+前缀和+dp

    题目描述 为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她们都是电脑组的高手,校长没 ...

  4. E 聪明的“KK”

    Description 非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘,体现出本国不断变换和绚丽多彩的自然风光与城市风貌.展馆由五部分组成,馆内影院播放名为<一眨眼的瞬间>的 ...

  5. Linux 下的dd命令使用详解

    转自:https://www.cnblogs.com/jikexianfeng/p/6103500.html 一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意 ...

  6. ECharts 上手

    一.获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载 ...

  7. Github网站css加载不出来的处理方法(转,亲测有效)

    转载链接:https://blog.csdn.net/qq_36589706/article/details/80573008因为工作需求,自己会经常使用到github,但是突然有一天打开github ...

  8. C# Repeater 嵌套

    <table class="table table-bordered table-fixed"> <thead> <tr> <th wid ...

  9. 牛客假日团队赛1 J.分组

    链接: https://ac.nowcoder.com/acm/contest/918/J 题意: 在Farmer John最喜欢的节日里,他想要给他的朋友们赠送一些礼物.由于他并不擅长包装礼物,他想 ...

  10. 软件测试的生命周期&测试流程

    一.软件的生命周期 二.软件生命周期的阶段 三.软件模型 四.软件测试的基本流程 五.软件开发流程.测试流程梳理 六.C/S与B/S架构 七.对软件测试行业的理解 八.常见笔试面试题 一.软件的生命周 ...