AngularJS入门教程.docx

1、AngularJS入门教程AngularJS入门教程来源: AngularJS快速开始Hello World!开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：1. 使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。2. 将下面的源代码复制到您的HTML文件。3. 在web浏览器中打开这个HTML文件。源代码 Hello World! 请在您的浏览器中运行以上代码查看效果。现在让我们仔细看看代码，看看到底怎么回事。 当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：这行载入AngularJS脚

2、本：（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）最后，标签中的正文是应用的模板，在UI中显示我们的问候语：Hello World!注意，使用双大括号标记的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串World。下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。Hello AngularJS World!本示例演示AngularJS的双向数据绑定（bi-directional data binding）：1. 编辑前面创建的helloworld.html文档。2. 将下面的源代码复制到您的HTML文件。3.

3、刷新浏览器窗口。源代码 Your name: Hello yourname | World! 请在您的浏览器中运行以上代码查看效果。该示例有一下几点重要的注意事项： 文本输入指令绑定到一个叫yourname的模型变量。 双大括号标记将yourname模型变量添加到问候语文本。 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。AngularJS应用的解析本节描述A

4、ngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：模板（Templates） 模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！应用程序逻辑（Logic）和行为（Behavior） 应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。

5、这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。模型数据（Data） 模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。此外，AngularJS还提供了一些非常有用的服务特性：1. 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。2. 您还可以扩展和添加自己特定的应用服务。3. 这些服务可以让您非常方便的编

6、写WEB应用。AngularJS入门教程：导言和准备 学习AngularJS的一个好方法是逐步完成本教程，它将引导您构建一个完整的AngularJS web应用程序。 该web应用是一个Android设备清单的目录列表，您可以筛选列表以便查看您感兴趣的设备，然后查看设备的详细信息。本教程将向您展示AngularJS怎样使得web应用更智能更灵活，而且不需要各种扩展程序或插件。 通过本教程的学习，您将：1. 阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图。2. 学习如何使用AngularJS创建数据侦听器，且不需要进行DOM操作。3.

7、学习一种更好、更简单的方法来测试您的web应用程序。4. 学习如何使用AngularJS创建常见的web任务，例如更方便的将数据引入应用程序。而且这一切可在任何一个浏览器实现，无需配置浏览器！当你完成了本教程后，您将学会：1. 创建一个可在任何浏览器中的工作的动态应用。2. 了解AngularJS与其它JavaScript框架之间的区别。3. 了解AngularJS如何实现数据绑定。4. 利用AngularJS的种子项目快速创建自己的项目。5. 创建和运行测试。6. 学习更多AngularJS标识资源(API)。本教程将指导您完成一个简单的应用程序创建过程，包括编写和运行单元测试、不断地测试应

8、用。 教程的每个步骤为您提供建议以了解更多有关AngularJS和您创建的web应用程序。 您可能会在短时间内快速读完本教程，也可能需要花大量时间深入研究本教程。 如果想看一个简短的AngularJS介绍文档，请查看快速开始 Getting Started文档。搭建学习环境无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压缩包。1. 您需要安装Node.js和Testacular来运行本项目，请到Node.js官方网站下载并安装最新版，然后把node可执行程

9、序路径添加到系统环境变量PATH中，完成后在命令行中运行一下命令可以查看是否安装成功：node -version然后安装Testacular单元测试程序，请运行如下命令：npm install -g testacular2. 安装Git工具，然后用以下命令从Github复制本教程项目的源代码文件：git clone git:/您也可以直接从网上下载本教程项目源代码的镜像归档压缩包。这个命令会在您当前文件夹中建立新文件夹angular-phonecat。3. 最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。4. 进入教程源代码文件包angular-phonecat，运行服务器后

10、台程序，开始学习AngularJS！5. cd angular-phonecatnode scripts/web-server.jsAngularJS入门教程00：引导程序我们现在开始准备编写AngularJS应用phonecat。这一步骤（步骤0），您将会熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用。1. 进入angular-phonecat目录，运行如下命令：git checkout -f step-0该命令将重置phonecat项目的工作目录，建议您在每一学习步骤运行此命令，将命令中的数字改成您学习步骤对应的数字，该命令将清除您在工作目录内

11、做的任何更改。2. 运行以下命令：node scripts/web-server.js来启动服务器，启动后命令行终端将会提示Http Server running at http:/localhost:8000,请不要关闭该终端，关闭该终端即关闭了服务器。在浏览器中输入http:/localhost:8000/app/index.html来访问我们的phonecat应用。现在，在浏览器中您应该已经看到了我们的初始应用，很简单，但说明我们的项目已经可以运行了。应用中显示的“Nothing here yet!”是由如下HTML代码构建而成，代码中包含了AngularJS的关键元素，正是我们需要学习

12、的。app/index.html My HTML File Nothing here yet + !代码在做什么呢？ng-app指令：ng-app指令标记了AngularJS脚本的作用域，在中添加ng-app属性即说明整个都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如，则AngularJS脚本仅在该中运行。AngularJS脚本标签：这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。双大

13、括号绑定的表达式：Nothing here yet + !这行代码演示了AngularJS模板的核心功能绑定，这个绑定由双大括号和表达式yet + !组成。这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，接下来的步骤我们将看到，DOM可以随着表达式运算结果的改变而实时更新。AngularJS表达式Angular expression是一种类似于JavaScript的代码片段，AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。引导AngularJS应用通过ngApp指令来自动引导AngularJS应用是一种简洁的方式，适合大多数情况。

14、在高级开发中，例如使用脚本装载应用，您也可以使用bootstrap手动引导AngularJS应用。AngularJS应用引导过程有3个重要点：1. 注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；2. 注入器将会创建根作用域作为我们应用模型的范围；3. AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会

15、自动检测变化，并作出相应的处理及更新。上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定，其中的模型也是空的。下一步我们尝试稍复杂的应用！我工作目录中这些文件是干什么的？上面的应用来自于AngularJS种子项目，我们通常可以使用AngularJS种子项目来创建新项目。种子项目包括最新的AngularJS代码库、测试库、脚本和一个简单的应用程序示例，它包含了开发一个典型的web应用程序所需的基本配置。对于本教程，我们对AngularJS种子项目进行了下列更改：1. 删除示例应用程序；2. 添加手机图像到app/img/phones/；3. 添加手机数据文件(JSON)到app/ph

16、ones/；4. 添加Twitter Bootstrap文件到app/css/ 和app/img/。练习试试把关于数学运算的新表达式添加到index.html：1 + 2 = 1 + 2 总结现在让我们转到步骤1，将一些内容添加到web应用程序。AngularJS入门教程01：静态模板推荐2收藏为了说明angularJS如何增强了标准HTML，我们先将创建一个静态HTML页面模板，然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。在本步骤中，我们往HTML页面中添加两个手机的基本信息，用以下命令将工作目录重置到步骤1。git checkout -f step-1请编辑ap

17、p/index.html文件，将下面的代码添加到index.html文件中，然后运行该应用查看效果。app/index.html Nexus S Fast just got faster with Nexus S. Motorola XOOM with Wi-Fi The Next, Next Generation tablet. 练习尝试添加多个静态HTML代码到index.html， 例如：Total number of phones: 2总结本步骤往应用中添加了静态HTML手机列表， 现在让我们转到步骤2以了解如何使用AngularJS动态生成相同的列表。AngularJS入门教程02：

18、AngularJS 模板推荐3收藏是时候给这些网页来点动态特性了用AngularJS！我们这里为后面要加入的控制器添加了一个测试。一个应用的代码架构有很多种。对于AngularJS应用，我们鼓励使用模型-视图-控制器（MVC）模式解耦代码和分离关注点。考虑到这一点，我们用AngularJS来为我们的应用添加一些模型、视图和控制器。请重置工作目录：git checkout -f step-2我们的应用现在有了一个包含三部手机的列表。步骤1和步骤2之间最重要的不同在下面列出。，你可以到GitHub去看完整的差别。视图和模板在AngularJS中，一个视图是模型通过HTML*模板*渲染之后的映射。这

19、意味着，不论模型什么时候发生变化，AngularJS会实时更新结合点，随之更新视图。比如，视图组件被AngularJS用下面这个模板构建出来： . phone.name phone.snippet 我们刚刚把静态编码的手机列表替换掉了，因为这里我们使用ngRepeat指令和两个用花括号包裹起来的AngularJS表达式phone.name和phone.snippet能达到同样的效果。 在标签里面的ng-repeat=phone in phones语句是一个AngularJS迭代器。这个迭代器告诉AngularJS用第一个标签作为模板为列表中的每一部手机创建一个元素。 正如我们在第0步时学到的，

20、包裹在phone.name和phone.snippet周围的花括号标识着数据绑定。和常量计算不同的是，这里的表达式实际上是我们应用的一个数据模型引用，这些我们在PhoneListCtrl控制器里面都设置好了。模型和控制器在PhoneListCtrl控制器里面初始化了数据模型（这里只不过是一个包含了数组的函数，数组中存储的对象是手机数据列表）：app/js/controller.js:function PhoneListCtrl($scope) $scope.phones = name: Nexus S, snippet: Fast just got faster with Nexus S.,

21、name: Motorola XOOM with Wi-Fi, snippet: The Next, Next Generation tablet., name: MOTOROLA XOOM, snippet: The Next, Next Generation tablet. ;尽管控制器看起来并没有起到什么控制的作用，但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境，控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层，数据和逻辑部件联系在一起的： PhoneListCtrl控制器方法的名字（在JS文件controllers.js中）和标签里面的ngControlle

22、r指令的值相匹配。 手机的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有标记内部的数据绑定有效。AngularJS的作用域理论非常重要：一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改都会被立刻体现在模型中。想要更加深入理解AngularJS的作用域，请参看AngularJS作用域文档

23、。测试“AngularJS方式”让开发时代码测试变得十分简单。让我们来瞅一眼下面这个为控制器新添加的单元测试：test/unit/controllersSpec.js:describe(PhoneCat controllers, function() describe(PhoneListCtrl, function() it(should create phones model with 3 phones, function() var scope = , ctrl = new PhoneListCtrl(scope); expect(scope.phones.length).toBe(3);

24、 ); ););这个测试验证了我们的手机数组里面有三条记录（暂时无需弄明白这个测试脚本）。这个例子显示出为AngularJS的代码创建一个单元测试是多么的容易。正因为测试在软件开发中是必不可少的环节，所以我们使得在AngularJS可以轻易地构建测试，来鼓励开发者多写它们。在写测试的时候，AngularJS的开发者倾向于使用Jasmine行为驱动开发（BBD）框架中的语法。尽管AngularJS没有强迫你使用Jasmine，但是我们在教程里面所有的测试都使用Jasmine编写。你可以在Jasmine的官方主页或者Jasmine Wiki上获得相关知识。基于AngularJS的项目被预先配置为使

25、用JsTestDriver来运行单元测试。你可以像下面这样运行测试：1. 在一个单独的终端上，进入到angular-phonecat目录并且运行./scripts/test-server.sh来启动测试（Windows命令行下请输入.scriptstest-server.bat来运行脚本，后面脚本命令运行方式类似）；2. 打开一个新的浏览器窗口，并且转到http:/localhost:9876；3. 选择“Capture this browser in strict mode”。这个时候，你可以抛开你的窗口不管然后把这事忘了。JsTestDriver会自己把测试跑完并且把结果输出在你的终端里。

26、4. 运行./scripts/test.sh进行测试 。你应当看到类似于如下的结果：Chrome: Runner reset.Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms) Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)耶！测试通过了！或者没有. 注意：如果在你运行测试之后发生了错误，关闭浏览器然后回到终端关了脚本，然后在重新来一边上面的步骤。练习 为index.html添加另一个数据绑定。例如：Total number of phones: phones.length 创建一个新的数据模型属性，并且把它绑定到模板上。例如：$scope.hello = Hello, World!更新你的浏览器，确保显示出来“Hello, World!” 用一个迭代器创建一个简单的表： row number i现在让数据模