AngularJS入门教程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
AngularJS入门教程：导言和准备
发表于 2012年9月2日 angularjs
学习AngularJS的一个好方法是逐步完成本教程，它将引导您构建一个完整的AngularJS web应
用程序。 该web应用是一个Android设备清单的目录列表，您可以筛选列表以便查看您感兴趣的设
备，然后查看设备的详细信息。
本教程将向您展示AngularJS怎样使得web应用更智能更灵活，而且不需要各种扩展程序或插
件。 通过本教程的学习，您将：
1. 阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态
数据视图。
2. 学习如何使用AngularJS创建数据侦听器，且不需要进行DOM操作。
3. 学习一种更好、更简单的方法来测试您的web应用程序。
4. 学习如何使用AngularJS创建常见的web任务，例如更方便的将数据引入应用程序。
而且这一切可在任何一个浏览器实现，无需配置浏览器！
当你完成了本教程后，您将学会：
1.
创建一个可在任何浏览器中的工作的动态应用。2.
了解AngularJS与其它JavaScript框架之间的区别。3.
了解AngularJS如何实现数据绑定。4.
利用AngularJS的种子项目快速创建自己的项目。5.
创建和运行测试。6. 学习更多AngularJS标识资源(API)。
本教程将指导您完成一个简单的应用程序创建过程，包括编写和运行单元测试、不断地测试应
用。 教程的每个步骤为您提供建议以了解更多有关AngularJS和您创建的web应用程序。
您可能会在短时间内快速读完本教程，也可能需要花大量时间深入研究本教程。 如果想看一个简
短的AngularJS介绍文档，请查看快速开始文档。
搭建学习环境
无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版
本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压
缩包。
1. 在Mac、Linux或Windows系统中安装Java 运行环境，进行单元测试时需要运行Java程序，以下命令可
检测您的系统是否已安装Java运行环境：
← 上一篇下一篇 →
资讯文档社区关于搜索注册 登录
AngularJS中文社区 && AngularJS英文官网 && 代码许可 The MIT License && 文档许可 CC BY 3.0© 2012 | Powered by WordPress & bbPress | [湘ICP备12011607]
关于 angularjs
AngularJS中国社区
查看 angularjs 发表的文章 →
java -version
2. 安装Git 工具，然后用以下命令从Github复制本教程项目的源代码文件：
git clone git:///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快速开始
发表于 2012年9月4日 angularjs
Hello World!
开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：
1. 使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
2. 将下面的源代码复制到您的HTML文件。
3. 在web浏览器中打开这个HTML文件。
源代码
Hello {{'World'}}!
运行效果
Hello World!
打开网页应看到如下效果：
现在让我们仔细看看代码，看看到底怎么回事。 当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：
这行载入AngularJS脚本：
（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）
最后，标签中的正文是应用的模板，在UI中显示我们的问候语：
Hello{{'World'}}!
注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。
下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。
Hello AngularJS World!
本示例演示AngularJS的双向数据绑定（bi-directional data binding）：
1. 编辑前面创建的helloworld.html文档。
2. 将下面的源代码复制到您的HTML文件。
3. 刷新浏览器窗口。