[Angular Tutorial] 1-Static Template
为了说明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的更多相关文章
- [Angular Tutorial]PhoneCat Tutorial App
(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...
- [Angular Tutorial] 3-Components
在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户 ...
- [Angular Tutorial] 7-XHRs & Dependency Injection
我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl ...
- [Angular Tutorial] 14 -Animations
在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...
- [Angular Tutorial] 13 -REST and Custom Services
在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...
- [Angular Tutorial] 12 -Event Handlers
在这一步中,您将会在电话细节页面添加一个可点击的电话图片转换器. ·电话细节页面展示了当前电话的一张大图片和几张相对较小的略图.如果我们能仅仅通过点击略图就能把大图片换成略图就好了.让我们看看用Ang ...
- [Angular Tutorial] 11 -Custom Filters
在这一步中您将学到如何创建您自己的展示过滤器. ·在先前的步骤中,细节页面展示“true”或“false”来显示某部电话是否有某项功能.在这一步中,我们将使用自定义的过滤器来将这些个字符串转化成符号: ...
- [Angular Tutorial] 10 -More Templating
在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现 ...
- [Angular Tutorial] 9 -Routing & Multiple Views
在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...
随机推荐
- listview的简单封装
package com.itheima.googleplay.ui.view; import android.content.Context; import android.graphics.Colo ...
- 使用Word API打开Word文档 ASP.NET编程中常用到的27个函数集
使用Word API(非Openxml)打开Word文档简单示例(必须安装Word) 首先需要引入参照Microsoft.Office.Interop.Word 代码示例如下: public void ...
- MyEclipse2015 javaweb项目从svn检出后变成java项目,clean之后不能编译,解决办法是
javaweb项目从svn检出后变成java项目,解决办法是:1.项目右键–properties–Project Facets,勾选上Dynamic Web Module .Java 两个复选框.点 ...
- 深入理解最强桌面地图控件GMAP.NET ---离线地图
enjoyeclipse 深入理解最强桌面地图控件GMAP.NET ---离线地图 这章会介绍GMAP.NET的核心功能之一:离线地图.这个功能可以满足很多政府项目.保密项目.或者由于种种原因不能上网 ...
- js获取屏幕和窗口的信息
<html><script>function a(){document.write("屏幕分辨率为:"+screen.width+"*" ...
- learn from 德国老师
最近在跟踪德国来的一个老师学android,感触比较深的一点就是他对细节的理解,一个源代码他可以从第一行解释到最后一行,知道每一行的意思和用法,这可能就是德国人对细节的追求. 刚才想了一下写代码确实应 ...
- mysql优化---优化工具MySQL performance tuning primer script
MySQL performance tuning primer script一个简单好用的mysql优化工具,其实一个shell脚本 下载: $ wget http://www.day32.com/M ...
- 密钥public/private key登陆linux
Public Key认证是什么这是一种认证方法,类似于常见的用户名密码认证方法.不同的是需要在客户端机器上保留一个很长很长的加密key,而在服务器端需要做出相应的配置.当客户端想要访问服务器时,服务器 ...
- 关于textarea的应用--onchage,onpropertychange,oninput
oninput,onpropertychange,onchange的用法 1.onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对 ...
- 将Web项目访问的URL项目名设置为"/"
工具:Eclipse 步骤: 1.鼠标右键项目名--->properties--->Web Project Setting--->Context root. 将Context roo ...