AngularJS入门教程

AngularJS入门教程来源:快速开始HelloWorld!开始学习AngularJS的一个好方法是创建经典应用程序“HelloWorld!”：1.使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。2.将下面的源代码复制到您的HTML文件。3.在web浏览器中打开这个HTML文件。源代码!doctypehtmlhtmlng-appheadscriptsrc={{'World'}}!/body/html请在您的浏览器中运行以上代码查看效果。现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：htmlng-app这行载入AngularJS脚本：scriptsrc=（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）最后，标签中的正文是应用的模板，在UI中显示我们的问候语：Hello{{'World'}}!注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。HelloAngularJSWorld!本示例演示AngularJS的双向数据绑定（bi-directionaldatabinding）：1.编辑前面创建的helloworld.html文档。2.将下面的源代码复制到您的HTML文件。3.刷新浏览器窗口。源代码!doctypehtmlhtmlng-appheadscriptsrc=:inputtype=textng-model=yournameplaceholder=WorldhrHello{{yourname||'World'}}!/body/html请在您的浏览器中运行以上代码查看效果。该示例有一下几点重要的注意事项：文本输入指令inputng-model=yourname/绑定到一个叫yourname的模型变量。双大括号标记将yourname模型变量添加到问候语文本。你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。AngularJS应用的解析本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：模板（Templates）模板是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！应用程序逻辑（Logic）和行为（Behavior）应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。模型数据（Data）模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。此外，AngularJS还提供了一些非常有用的服务特性：1.底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。2.您还可以扩展和添加自己特定的应用服务。3.这些服务可以让您非常方便的编写WEB应用。AngularJS入门教程：导言和准备学习AngularJS的一个好方法是逐步完成本教程，它将引导您构建一个完整的AngularJSweb应用程序。该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介绍文档，请查看[快速开始][GettingStarted]文档。搭建学习环境无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压缩包。1.您需要安装Node.js和Testacular来运行本项目，请到Node.js官方网站下载并安装最新版，然后把node可执行程序路径添加到系统环境变量PATH中，完成后在命令行中运行一下命令可以查看是否安装成功：node-version然后安装Testacular单元测试程序，请运行如下命令：npminstall-gtestacular2.安装Git工具，然后用以下命令从Github复制本教程项目的源代码文件：gitclonegit://github.com/angular/angular-phonecat.git您也可以直接从网上下载本教程项目源代码的镜像归档压缩包。这个命令会在您当前文件夹中建立新文件夹angular-phonecat。3.最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。4.进入教程源代码文件包angular-phonecat，运行服务器后台程序，开始学习AngularJS！5.cdangular-phonecatnodescripts/web-server.jsAngularJS入门教程00：引导程序我们现在开始准备编写AngularJS应用——phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。1.进入angular-phonecat目录，运行如下命令：gitcheckout-fstep-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内做的任何更改。2.运行以下命令：nodescripts/web-server.js来启动服务器，启动后命令行终端将会提示HttpServerrunningat请不要关闭该终端，关闭该终端即关闭了服务器。在浏览器中输入来访问我们的phonecat应用。现在，在浏览器中您应该已经看到了我们的初始应用，很简单，但说明我们的项目已经可以运行了。应用中显示的“Nothinghereyet!”是由如下HTML代码构建而成，代码中包含了AngularJS的关键元素，正是我们需要学习的。app/index.html!doctypehtmlhtmllang=enng-appheadmetacharset=utf-8titleMyHTMLFile/titlelinkrel=stylesheethref=css/app.csslinkrel=stylesheethref=css/bootstrap.cssscriptsrc=lib/angular/angular.js/script/headbodypNothinghere{{'yet'+'!'}}/p/body/html代码在做什么呢？ng-app指令：htmllang=enng-appng-app指令标记了AngularJS脚本的作用域，在html中添加ng-app属性即说明整个html都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如divng-app，则AngularJS脚本仅在该div中运行。AngularJS脚本标签：scriptsrc=lib/angular/angular.js/script这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。双大括号绑定的表达式：pNothinghere{{'yet'+'!'}}/p这行代码演示了AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}和表达式'yet'+'!'组成。这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。AngularJS表达式Angularexpression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。引导AngularJS应用通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。在高级开发中，例如使用脚本装载应用，您也可以使用bootstrap手动引导AngularJS应用。AngularJS应用引导过程有3个重要点：1.注入器(injector)将用于创建此应用程序的依赖注入(dependencyinjection)；2.注入器将会创建根作用域作为我们应用模型的范围；3.AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。上面这个应用的结构非常简单。该模板包仅