Angular系列----AngularJS入门教程02:静态模板(转载)
为了说明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:静态模板(转载)的更多相关文章
- Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01:AngularJS模板 (转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程00:引导程序(转载)
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列----AngularJS入门教程04:迭代器过滤(转载)
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...
- Angular系列------AngularJS入门教程:导言和准备(转载)
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
- Angular系列----AngularJS入门教程05:双向绑定(转载)
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程02:AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
随机推荐
- 让JNLP应用程序从Firefox浏览器启动起来
- Javascript 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
- Codeforces Round #379 (Div. 2) E. Anton and Tree 缩点 直径
E. Anton and Tree 题目连接: http://codeforces.com/contest/734/problem/E Description Anton is growing a t ...
- JS实现移动端图片延迟加载
图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...
- GitHub使用简单记录
根据<GotGitHub>[1]所做的一些整理 1. 浏览托管项目 在GitHub的页面中可以使用键盘快捷键 (1)按下问号(?)会在弹出窗口显示当前页面可用的快捷键. (2)在项目的代码 ...
- 删除Visual Studio Online 中团队项目
最新文章:Virson's Blog 方法1:使用TFSDeleteProject删除: 1).在本地Visual Studio中登录云端TFS服务器: 2). 连接成功之后,打开VS命令工具,下图红 ...
- 魔兽争霸3 replay 格式
******************************************************************************* * WarCraft III Repla ...
- jquery自定义类似$.ajax()的方法
热腾腾的代码: <script type="text/javascript"> $.extend({ testgogo: function (options) { va ...
- JAVA多线程编程之生产者消费者模式
Java中有一个BlockingQueue可以用来充当堵塞队列,下面是一个桌面搜索的设计 package net.jcip.examples; import java.io.File; import ...
- Windows Azure Compute Emulator无法启动问题解决方案
Visual Studio 2013安装了Windows Azure SDK 2.7,但启动Emulator调试时,出现如下错误: Error: The installed Windows Azure ...