angularjs入门

31AngularJS入门教程

时间:2015-06-12 14:50来源:网络整理 作者:KKWL 点击:
资讯文档社区关于搜索注册??登录;←?上一篇下一篇?→;AngularJS入门教程:导言和准备;发表于??2012年9月2日??angularj;学习AngularJS的一个好方法是逐步完成本教;用程序;备,然后查看

资讯文档社区关于搜索注册??登录;←?上一篇下一篇?→;AngularJS入门教程:导言和准备;发表于??2012年9月2日??angularj;学习AngularJS的一个好方法是逐步完成本教;用程序;备,然后查看设备的详细信息;本教程将向您展示AngularJS怎样使得web;件;1.??阅读示例学习怎样使用AngularJS的;数据视图;2.??学习如

资讯文档社区关于搜索注册??登录

←?上一篇下一篇?→

AngularJS入门教程:导言和准备

发表于??2012年9月2日??angularjs

学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS??web应

用程序。??该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设

备,然后查看设备的详细信息。

本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插

件。?通过本教程的学习,您将:

1.??阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态

数据视图。

2.??学习如何使用AngularJS创建数据侦听器,且不需要进行DOM操作。

3.??学习一种更好、更简单的方法来测试您的web应用程序。

4.??学习如何使用AngularJS创建常见的web任务,例如更方便的将数据引入应用程序。

而且这一切可在任何一个浏览器实现,无需配置浏览器!

当你完成了本教程后,您将学会:

1.??

2.??

3.??

4.??

5.??

6.??创建一个可在任何浏览器中的工作的动态应用。了解AngularJS与其它JavaScript框架之间的区别。了解AngularJS如何实现数据绑定。利用AngularJS的种子项目快速创建自己的项目。创建和运行测试。学习更多AngularJS标识资源(API)。

本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应

用。??教程的每个步骤为您提供建议以了解更多有关AngularJS和您创建的web应用程序。

您可能会在短时间内快速读完本教程,也可能需要花大量时间深入研究本教程。??如果想看一个简

短的AngularJS介绍文档,请查看快速开始文档。

搭建学习环境

无论是Mac、Linux或Windows环境中,您均可遵循本教程学习编程。您可以使用源代码管理版

本控制系统Git获取本教程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压

缩包。

1.??在Mac、Linux或Windows系统中安装Java运行环境,进行单元测试时需要运行Java程序,以下命令可

检测您的系统是否已安装Java运行环境:

java -version

2.??安装Git工具,然后用以下命令从Github复制本教程项目的源代码文件:

git clone git://github.com/angular/angular-phonecat.git

您也可以直接从网上下载本教程项目源代码文件的镜像归档压缩包。

3.??您的系统需运行HTTP服务器程序,如Apache等。如果您的系统没有安装HTTP服务器程序,建议安

装Node.js,它是一个运行JavaScript的高性能HTTP服务器程序。

4.??最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。

5.??进入教程源代码文件包angular-phonecat,开始学习AngularJS!

cd angular-phonecat

版权声明:??中文文档AngularJS中文社区??&&??英文文档AngularJS官网??&&??代码许可The?MIT

License??&&??文档许可CC?BY?3.0

angularjs??发表在??入门教程??分类,标签??AngularJS、入门教程。将本文加入收藏夹。

关于??angularjs

AngularJS中国社区

查看??angularjs??发表的文章??→

要发表评论,您必须先登录。

AngularJS中文社区??&&??AngularJS英文官网??&&??代码许可??The?MIT?License??&&??文档许可??CC?BY?3.0???2012??AngularJS.cn??|??Powered??by??WordPress??&??bbPress??|??[湘ICP备12011607]

资讯文档社区关于搜索注册??登录

←?上一篇下一篇?→

AngularJS快速开始

发表于??2012年9月4日??angularjs

Hello?World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello??World!”:

1.??使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。

2.??将下面的源代码复制到您的HTML文件。

3.??在web浏览器中打开这个HTML文件。

源代码

<!doctype html>

<html ng-app>

<head>

<script src=""></script>

</head>

<body>

Hello {{'World'}}!

</body>

</html>

运行效果

Hello??World!

打开网页应看到如下效果:

现在让我们仔细看看代码,看看到底怎么回事。??当加载该页时,标记ng-app告诉AngularJS处

理整个HTML页并引导应用:

<html ng-app>

这行载入AngularJS脚本:

<script src=""></script>

(想了解AngularJS处理整个HTML页的细节,请看Bootstrap。)

最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

Hello {{'World'}}!

注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符

串‘World’。

下面,让我们看一个更有趣的例子:使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello?AngularJS?World!

本示例演示AngularJS的双向数据绑定(bi-directional??data??binding):

1.??编辑前面创建的helloworld.html文档。

2.??将下面的源代码复制到您的HTML文件。

3.??刷新浏览器窗口。

源代码

<!doctype html>

<html ng-app>

<head>

<script src=""></script>

</head>

<body>

Your name: <input type="text" ng-model="yourname" placeholder="World">

<hr>

Hello {{yourname || 'World'}}!

</body>

</html>

运行效果

Your??name:??World

Hello??World!

打开网页应看到如下效果:

该示例有一下几点重要的注意事项:

文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。

双大括号标记将yourname模型变量添加到问候语文本。

你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。??这就是

------分隔线----------------------------