angularjs入门教程


- 1 - 版权说明 《AngularJS入门教程》由北京图灵文化发展有限公司全球范围内出版。《AngularJS入门教程》为免费电子书, 转载或引用本书内容应注明出自图灵社区。 版权所有,侵权必究。 书 名 《AngularJS入门教程》 译 严清 李诗剑 版本信息 2013年5月 定 价 0.00元 阅读、书评、交流、勘误、意见或建议,欢迎您来到图灵社区! http://www.ituring.com.cn/ 反侵权热线 (010)51095186 图灵社区 http://www.ituring.com.cn - 2 - AngularJS入门教程目录 AngularjsTutorial_cn AngularJS入门教程——AngularJS中文社区提供 AngularJS中文社区是一个专业的AngularJS中文开源技术社区,致力于AngularJS的技术学习、交流和研究。 我们非常欢迎更多对AngularJS感兴趣的朋友加入! AngularJS入门教程目录 1. 快速开始 2. 导言和准备 3. 引导程序 4. 静态模板 5. AngularJS 模板 6. 迭代器过滤 7. 双向绑定 8. XHR 和依赖注入 9. 链接与图片模板 10.路由与多视图 11.更多模板 12.过滤器 13.事件处理器 14.REST 和定制服务 15.完结篇 AngularJS 入门教程 - 3 - AngularJS快速开始 Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 1. 使用您喜爱的文本编辑器,创建一个 HTML 文件,例如:helloworld.html。 2. 将下面的源代码复制到您的 HTML 文件。 3. 在 web 浏览器中打开这个 HTML 文件。 源代码 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. 刷新浏览器窗口。 源代码 图灵社区 http://www.ituring.com.cn - 4 - Your name:
Hello {{yourname || 'World'}}! 请在您的浏览器中运行以上代码查看效果。 该示例有一下几点重要的注意事项:  文本输入指令绑定到一个叫 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 入门教程 - 5 - 图灵社区 http://www.ituring.com.cn - 6 - 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 入门教程 - 7 - 本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用。 教程的每个步骤 为您提供建议以了解更多有关AngularJS和您创建的web应用程序。 您可能会在短时间内快速读完本教程,也可能需 要花大量时间深入研究本教程。 如果想看一个简短的AngularJS介绍文档,请查看[快速开始][ Getting Started]文 档。 搭建学习环境 无论是Mac、Linux或Windows环境中,您均可遵循本教程学习编程。您可以使用源代码管理版本控制系统Git获取本教 程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压缩包。 1. 您需要安装Node.js和Testacular来运行本项目,请到Node.js官方网站下载并安装最新版,然后把node可执 行程序路径添加到系统环境变量PATH中,完成后在命令行中运行一下命令可以查看是否安装成功: 2. node -version 然后安装Testacular单元测试程序,请运行如下命令: npm install -g testacular 3. 安装Git工具,然后用以下命令从Github复制本教程项目的源代码文件: 4. git clone git://github.com/angular/angular-phonecat.git 您也可以直接从网上下载本教程项目源代码的镜像归档压缩包。这个命令会在您当前文件夹中建立新文件夹angular-phon ecat。 5. 最后一件事要做的就是确保您的计算机安装了web浏览器和文本编辑器。 6. 进入教程源代码文件包angular-phonecat,运行服务器后台程序,开始学习AngularJS! 7. cd angular-phonecat 8. node scripts/web-server.js 图灵社区 http://www.ituring.com.cn - 8 - AngularJS入门教程00:引导程序 我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动 包含AngularJS种子项目的开发环境,并在浏览器端运行应用。 1. 进入angular-phonecat目录,运行如下命令: 2. git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的 数字,该命令将清除您在工作目录内做的任何更改。 3. 运行以下命令: 4. node scripts/web-server.js 来启动服务器,启动后命令行终端将会提示Http Server running at http://localhost:8000,请不要关闭该终端,关闭该终端即 关闭了服务器。在浏览器中输入http://localhost:8000/app/index.html来访问我们的phonecat应用。 现在,在浏览器中您应该已经看到了我们的初始应用,很简单,但说明我们的项目已经可以运行了。 应用中显示的“Nothing here yet!”是由如下HTML代码构建而成,代码中包含了AngularJS的关键元素,正是我们需 要学习的。 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应用的作用域。 双大括号绑定的表达式: AngularJS 入门教程 - 9 -

Nothing here {{'yet' + '!'}}

这行代码演示了AngularJS模板的核心功能——绑定,这个绑定由双大括号{{}}和表达式'yet' + '!'组成。 这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,接下来的步骤我们将看到,DOM可以随着表达式 运算结果的改变而实时更新。 AngularJS表达式Angular expression是一种类似于JavaScript的代码片段,AngularJS表达式仅在AngularJS的作用 域中运行,而不是在整个DOM中运行。 引导AngularJS应用 通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。在高级开发中,例如使用脚本装载应 用,您也可以使用bootstrap手动引导AngularJS应用。 AngularJS应用引导过程有3个重要点: 1. 注入器(injector)将用于创建此应用程序的依赖注入(dependency injection); 2. 注入器将会创建根作用域作为我们应用模型的范围; 3. AngularJS 将会链接根作用域中的 DOM,从用 ngApp 标记的 HTML 标签开始,逐步处理 DOM 中指 令和绑定。 一旦AngularJS应用引导完毕,它将继续侦听浏览器的HTML触发事件,如鼠标点击事件、按键事件、HTTP传入响应等 改变DOM模型的事件。这类事件一旦发生,AngularJS将会自动检测变化,并作出相应的处理及更新。 上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定,其中的模型也是空的。下一步我们尝试稍复 杂的应用! 我工作目录中这些文件是干什么的? 上面的应用来自于AngularJS种子项目,我们通常可以使用AngularJS种子项目来创建新项目。种子项目包括最新的An gularJS代码库、测试库、脚本和一个简单的应用程序示例,它包含了开发一个典型的web应用程序所需的基本配置。 图灵社区 http://www.ituring.com.cn - 10 - 对于本教程,我们对AngularJS种子项目进行了下列更改: 1. 删除示例应用程序; 2. 添加手机图像到 app/img/phones/; 3. 添加手机数据文件(JSON)到 app/phones/; 4. 添加 Twitter Bootstrap 文件到 app/css/ 和 app/img/。 练习 试试把关于数学运算的新表达式添加到index.html:

1 + 2 = {{ 1 + 2 }}

总结 现在让我们转到步骤1,将一些内容添加到web应用程序。 AngularJS 入门教程 - 11 - AngularJS入门教程01:静态模板 为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换 成能动态显示的AngularJS模板。 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1。 git checkout -f step-1 请编辑app/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动态生成相同的列表。 图灵社区 http://www.ituring.com.cn - 12 - AngularJS入门教程02:AngularJS 模板 是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。 一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关 注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表。 步骤1和步骤2之间最重要的不同在下面列出。,你可以到GitHub去看完整的差别。 视图和模板 在AngularJS中,一个视图是模型通过HTML**模板**渲染之后的映射。这意味着,不论模型什么时候发生变化,Angul arJS会实时更新结合点,随之更新视图。 比如,视图组件被AngularJS用下面这个模板构建出来: ...
  • {{phone.name}}

    {{phone.snippet}}

我们刚刚把静态编码的手机列表替换掉了,因为这里我们使用ngRepeat指令和两个用花括号包裹起来的AngularJS表 达式——{{phone.name}}和{{phone.snippet}}——能达到同样的效果。  在
  • 标签里面的 ng-repeat="phone in phones"语句是一个 AngularJS 迭代器。这个迭代器告诉 AngularJS 用第一个
  • 标签作为模板为列表中的每一部手机创建一个
  • 元素。  正如我们在第 0 步时学到的,包裹在 phone.name 和 phone.snippet 周围的花括号标识着数据绑定。和常 量计算不同的是,这里的表达式实际上是我们应用的一个数据模型引用,这些我们在 PhoneListCtrl 控制器里面都设置好了。 AngularJS 入门教程 - 13 - 模型和控制器 在PhoneListCtrl控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列 表): app/js/controller.js: function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"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 中)和标签里面的 ngController 指令的值相匹配。  手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一 个根作用域被创建出来,而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域 对所有标记内部的数据绑定有效。 AngularJS的作用域理论非常重要:一个作用域可以视作模板、模型和控制器协同工作的粘接器。AngularJS使用作用 域,同时还有模板中的信息,数据模型和控制器。这些可以帮助模型和视图分离,但是他们两者确实是同步的!任何 对于模型的更改都会即时反映在视图上;任何在视图上的更改都会被立刻体现在模型中。 图灵社区 http://www.ituring.com.cn - 14 - 想要更加深入理解AngularJS的作用域,请参看AngularJS作用域文档。 测试 “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); }); }); }); 这个测试验证了我们的手机数组里面有三条记录(暂时无需弄明白这个测试脚本)。这个例子显示出为AngularJS的 代码创建一个单元测试是多么的容易。正因为测试在软件开发中是必不可少的环节,所以我们使得在AngularJS可以 轻易地构建测试,来鼓励开发者多写它们。 在写测试的时候,AngularJS的开发者倾向于使用Jasmine行为驱动开发(BBD)框架中的语法。尽管AngularJS没有强 迫你使用Jasmine,但是我们在教程里面所有的测试都使用Jasmine编写。你可以在Jasmine的官方主页或者Jasmine W iki上获得相关知识。 基于AngularJS的项目被预先配置为使用JsTestDriver来运行单元测试。你可以像下面这样运行测试: 1. 在一个单独的终端上,进入到 angular-phonecat 目录并且运行./scripts/test-server.sh 来启动测试 (Windows 命令行下请输入.\scripts\test-server.bat 来运行脚本,后面脚本命令运行方式类似); 2. 打开一个新的浏览器窗口,并且转到 http://localhost:9876 ; 3. 选择“Capture this browser in strict mode”。 这个时候,你可以抛开你的窗口不管然后把这事忘了。JsTestDriver会自己把测试跑完并且把结果输出在你的终端里。 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!" AngularJS 入门教程 - 15 - 更新你的浏览器,确保显示出来“Hello, World!”  用一个迭代器创建一个简单的表:    
    row number
    {{i}}
    现在让数据模型表达式的i增加1:
    row number
    {{i+1}}
     确定把toBe(3)改成toBe(4)之后单元测试失败,然后重新跑一遍./scripts/test.sh脚本 总结 你现在拥有一个模型,视图,控制器分离的动态应用了,并且你随时进行了测试。现在,你可以进入到步骤3来为应 用加入全文检索功能了。 图灵社区 http://www.ituring.com.cn - 16 - AngularJS入门教程03:迭代器过滤 我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能(没错, 这个真的非常简单!)。同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙。它监视着你 的应用,并且在发生回归的时候迅速报告。 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。 步骤2和步骤3之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 控制器 我们对控制器不做任何修改。 模板 app/index.html
    Search:
    • {{phone.name}}

      {{phone.snippet}}

    我们现在添加了一个标签,并且使用AngularJS的$filter函数来处理ngRepeat指令的输入。 这样允许用户输入一个搜索条件,立刻就能看到对电话列表的搜索结果。我们来解释一下新的代码:  数据绑定: 这是AngularJS的一个核心特性。当页面加载的时候,AngularJS会根据输入框的属性值名字,将 其与数据模型中相同名字的变量绑定在一起,以确保两者的同步性。 在这段代码中,用户在输入框中输入的数据名字称作query,会立刻作为列表迭代器(phone in phones | filter:query`)其 过滤器的输入。当数据模型引起迭代器输入变化的时候,迭代器可以高效得更新DOM将数据模型最新的状态反映出来。 AngularJS 入门教程 - 17 -  使用filter过滤器:filter函数使用query的值来创建一个只包含匹配query记录的新数组。 ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。 测试 在步骤2,我们学习了编写和运行一个测试的方法。单元测试用来测试我们用js编写的控制器和其他组件都非常方便, 但是不能方便的对DOM操作和应用集成进行测试。对于这些来说,端到端测试是一个更好的选择。 搜索特性是完全通过模板和数据绑定实现的,所以我们的第一个端到端测试就来验证这些特性是否符合我们的预期。 test/e2e/scenarios.js: describe('PhoneCat App', function() { describe('Phone list view', function() { beforeEach(function() { browser().navigateTo('../../app/index.html'); }); it('should filter the phone list as user types into the search box', function() { expect(repeater('.phones li').count()).toBe(3); input('query').enter('nexus'); expect(repeater('.phones li').count()).toBe(1); input('query').enter('motorola'); expect(repeater('.phones li').count()).toBe(2); }); }); }); 图灵社区 http://www.ituring.com.cn - 18 - 尽管这段测试代码的语法看起来和我们之前用Jasmine写的单元测试非常像,但是端到端测试使用的是AngularJS端到 端测试器提供的接口。 运行一个端到端测试,在浏览器新标签页中打开下面任意一个:  node.js 用户:http://localhost:8000/test/e2e/runner.html  使用其他 http 服务器的用户:http://localhost:[port-number]/[context-path]/test/e2e/runner.html  访客:http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html 这个测试验证了搜素框和迭代器被正确地集成起来。你可以发现,在AngularJS里写一个端到端测试多么的简单。尽 管这个例子仅仅是一个简单的测试,但是用它来构建任何一个复杂、可读的端到端测试都很容易。 练习  在 index.html 模板中添加一个{{query}}绑定来实时显示 query 模型的当前值,然后观察他们是如何根 据输入框中的值而变化。  现在我们来看一下我们怎么让query模型的值出现在HTML的页面标题上。 你或许认为像下面这样在title标签上加上一个绑定就行了: Google Phone Gallery: {{query}} 但是,当你重载页面的时候,你根本没办法得到期望的结果。这是因为query模型仅仅在body元素定义的作用域内才有效。 如果你想让元素绑定上query模型,你必须把ngController声明移动到HTML元素上,因为它是title和body元素的共同祖先。 <html ng-app ng-controller="PhoneListCtrl"> 一定要注意把body元素上的ng-controller声明给删了。 当绑定两个花括号在title元素上可以实现我们的目标,但是你或许发现了,页面正加载的时候它们已经显示给用户看 了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令,它们在页面加载时对用户是不可见的: <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery  在test/e2e/scenarios.js的describe块中加入下面这些端到端测试代码:  it('should display the current filter value within an element with id "status"',  function() {  expect(element('#status').text()).toMatch(/Current filter: \s*$/);  input('query').enter('nexus');  expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);  //alternative version of the last assertion that tests just the value of the binding  using('#status').expect(binding('query')).toBe('nexus');  }); 刷新浏览器,端到端测试器会报告测试失败。为了让测试通过,编辑index.html,添加一个id为“status”的div或者p元素, 内容是一个query绑定,再加上Current filter:前缀。例如:
    Current filter: {{query}}
    AngularJS 入门教程 - 19 -  在端到端测试里面加一条pause();语句,重新跑一遍。你将发现测试器暂停了!这样允许你有机会在测试运行过 程中查看你应用的状态。测试应用是实时的!你可以更换搜索内容来证明。稍有经验你就会知道,这对于在 端到端测试中迅速找到问题是多么的关键。 总结 我们现在添加了全文搜索功能,并且完成一个测试证明了搜索是对的!现在让我们继续到步骤4来看看给我们的手机 应用增加排序功能。 图灵社区 http://www.ituring.com.cn - 20 - AngularJS入门教程04:双向绑定 在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现,添加一个新的模型属性,把它 和迭代器集成起来,然后让数据绑定完成剩下的事情。 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序。 步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 app/index.html Search: Sort by:
    • {{phone.name}}

      {{phone.snippet}}

    我们在index.html中做了如下更改:  首先,我们增加了一个叫做 orderProp 的 Sort by:
  • 同时我们为手机详细信息视图添加一个占位模板。 app/partials/phone-detail.html TBD: detail view for {{phoneId}} 注意到我们的布局模板中没再添加PhoneListCtrl或PhoneDetailCtrl控制器属性! 测试 为了自动验证所有的东西都良好地集成起来,我们需要写一些端到端测试,导航到不同的URL上然后验证正确地视图 被渲染出来。 ... it('should redirect index.html to index.html#/phones', function() { browser().navigateTo('../../app/index.html'); expect(browser().location().url()).toBe('/phones'); }); ... describe('Phone detail view', function() { beforeEach(function() { browser().navigateTo('../../app/index.html#/phones/nexus-s'); }); it('should display placeholder page with phoneId', function() { expect(binding('phoneId')).toBe('nexus-s'); }); AngularJS 入门教程 - 33 - }); 你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。 练习 试着在index.html上增加一个{{orderProp}}绑定,当你在手机列表视图上时什么也没变。这是因为orderProp模型仅仅在PhoneLis tCtrl管理的作用域下才是可见的,这与
    元素相关。如果你在phone-list.html模板中加入同样的绑定,那么这个 绑定会按你设想的那样被渲染出来。 总结 设置路由并实现手机列表视图之后,我们已经可以进入步骤8来实现手机详细信息视图了。 图灵社区 http://www.ituring.com.cn - 34 - AngularJS入门教程08:更多模板 在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来。 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来。 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板。 步骤7和步骤8之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 除了phones.json,app/phones/目录也包含了每一部手机信息的json文件。 app/phones/nexus-s.json(样例片段) { "additionalFeatures": "Contour Display, Near Field Communications (NFC),...", "android": { "os": "Android 2.3", "ui": "Android" }, ... "images": [ "img/phones/nexus-s.0.jpg", "img/phones/nexus-s.1.jpg", "img/phones/nexus-s.2.jpg", "img/phones/nexus-s.3.jpg" ], "storage": { "flash": "16384MB", "ram": "512MB" } } 这些文件中的每一个都用相同的数据结构描述了一部手机的不同属性。我们会在手机详细信息视图中显示这些数据。 控制器 我们使用$http服务获取数据,以此来拓展我们的PhoneListCtrl。这和之前的手机列表控制器的工作方式是一样的。 app/js/controllers.js function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { $scope.phone = data; }); } //PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http']; 为了构造HTTP请求的URL,我们需要$route服务提供的当前路由中抽取$routeParams.phoneId。 模板 AngularJS 入门教程 - 35 - phone-detail.html文件中原有的TBD占位行已经被列表和构成手机详细信息的绑定替换掉了。注意到,这里我们使用 AngularJS的{{表达式}}标记和ngRepeat来在视图中渲染数据模型。 app/partials/phone-detail.html

    {{phone.name}}

    {{phone.description}}

    • Availability and Networks
      Availability
      {{availability}}
    • ... Additional Features
      {{phone.additionalFeatures}}
    测试 我们来写一个新的单元测试,这个测试和我们在步骤5中为PhoneListCtrl写的那个很像。 test/unit/controllersSpec.js ... describe('PhoneDetailCtrl', function(){ var scope, $httpBackend, ctrl; beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'}); $routeParams.phoneId = 'xyz'; scope = $rootScope.$new(); ctrl = $controller(PhoneDetailCtrl, {$scope: scope}); })); it('should fetch phone detail', function() { expect(scope.phone).toBeUndefined(); $httpBackend.flush(); expect(scope.phone).toEqual({name:'phone xyz'}); }); }); ... 执行./scripts/test.sh脚本来执行测试,你应该会看到如下输出: Chrome: Runner reset. ... Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms) Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms) 同时,我们也添加一个端到端测试,指向Nexus S手机详细信息页面并且验证页面的头部是“Nexus S”。 图灵社区 http://www.ituring.com.cn - 36 - test/e2e/scenarios.js ... describe('Phone detail view', function() { beforeEach(function() { browser().navigateTo('../../app/index.html#/phones/nexus-s'); }); it('should display nexus-s page', function() { expect(binding('phone.name')).toBe('Nexus S'); }); }); ... 你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。 练习 使用AngularJS端到端测试API写一个测试,用它来验证我们在Nexus S详细信息页面显示的四个缩略图。 总结 现在手机详细页面已经就绪了,在步骤9中我们将学习如何写一个显示过滤器。 AngularJS 入门教程 - 37 - AngularJS入门教程09:过滤器 在这一步你将学习到如何创建自己的显示过滤器。 请重置工作目录: git checkout -f step-9 现在转到一个手机详细信息页面。在上一步,手机详细页面显示“true”或者“false”来说明某个手机是否具有特 定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化:√作为“true”;以及×作为“false”。来让 我们看看过滤器代码长什么样子。 步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 定制过滤器 为了创建一个新的过滤器,先创建一个phonecatFilters模块,并且将定制的过滤器注册给这个模块。 app/js/filters.js angular.module('phonecatFilters', []).filter('checkmark', function() { return function(input) { return input ? '\u2713' : '\u2718'; }; }); 我们的过滤器命名为checkmark。它的输入要么是true,要么是false,并且我们返回两个表示true或false的unicode字 符(\u2713和\u2718)。 现在我们的过滤器准备好了,我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。 app/js/app/js ... angular.module('phonecat', ['phonecatFilters']). ... 模板 由于我们的模板代码写在app/js/filter.js文件中,所以我们需要在布局模板中引入这个文件。 app/index.html ... ... 在AngularJS模板中使用过滤器的语法是: {{ expression | filter }} 我们把过滤器应用到手机详细信息模板中: app/partials/phone-detail.html 图灵社区 http://www.ituring.com.cn - 38 - ...
    Infrared
    {{phone.connectivity.infrared | checkmark}}
    GPS
    {{phone.connectivity.gps | checkmark}}
    ... 测试 过滤器和其他组件一样,应该被测试,并且这些测试实际上很容易完成。 test/unit/filtersSpec.js describe('filter', function() { beforeEach(module('phonecatFilters')); describe('checkmark', function() { it('should convert boolean values to unicode checkmark or cross', inject(function(checkmarkFilter) { expect(checkmarkFilter(true)).toBe('\u2713'); expect(checkmarkFilter(false)).toBe('\u2718'); })); }); }); 注意在执行任何过滤器测试之前,你需要为phonecatFilters模块配置我们的测试注入器。 执行./scripts/test/sh运行测试,你应该会看到如下的输出: Chrome: Runner reset. .... Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms) 练习  现在让我们来练习一下AngularJS内置过滤器,在index.html中加入如下绑定: o {{ "lower cap string" | uppercase }} o {{ {foo: "bar", baz: 23} | json }} o {{ 1304375948024 | date }} o {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}  我们也可以用一个输入框来创建一个模型,并且将之与一个过滤后的绑定结合在一起。在index.html中加入 如下代码:  Uppercased: {{ userInput | uppercase }} 总结 现在你已经知道了如何编写和测试一个定制化插件,在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详 细信息页面。 AngularJS 入门教程 - 39 - AngularJS入门教程10:事件处理器 在这一步,你会在手机详细信息页面让手机图片可以点击。 请重置工作目录: git checkout -f step-10 手机详细信息视图展示了一幅当前手机的大号图片,以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的 替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 控制器 app/js/controllers.js ... function PhoneDetailCtrl($scope, $routeParams, $http) { $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) { $scope.phone = data; $scope.mainImageUrl = data.images[0]; }); $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; } } //PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http']; 在PhoneDetailCtrl控制器中,我们创建了mainImageUrl模型属性,并且把它的默认值设为第一个手机图片的URL。 模板 app/partials/phone-detail.html ...
    ... 我们把大图片的ngSrc指令绑定到mainImageUrl属性上。 同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时,这个处理器会使用setImage事件 处理函数来把mainImageUrl属性设置成选定缩略图的URL。 测试 为了验证这个新特性,我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图片。第二个测试点击 几个缩略图并且验证主图片随之合理的变化。 图灵社区 http://www.ituring.com.cn - 40 - test/e2e/scenarios.js ... describe('Phone detail view', function() { ... it('should display the first phone image as the main phone image', function() { expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg'); }); it('should swap main image if a thumbnail image is clicked on', function() { element('.phone-thumbs li:nth-child(3) img').click(); expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg'); element('.phone-thumbs li:nth-child(1) img').click(); expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg'); }); }); }); 你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。 练习 为PhoneDetailCtrl添加一个新的控制器方法: $scope.hello = function(name) { alert('Hello ' + (name || 'world') + '!'); } 并且添加: 到phone-details.html模板。 总结 现在图片浏览器已经做好了,我们已经为步骤11(最后一步啦!)做好了准备,我们会学习用一种更加优雅的方式来 获取数据。 AngularJS 入门教程 - 41 - AngularJS入门教程11:REST和定制服务 在这一步中,我们会改进我们APP获取数据的方式。 请重置工作目录: git checkout -f step-11 对我们应用所做的最后一个改进就是定义一个代表RESTful客户端的定制服务。有了这个客户端我们可以用一种更简 单的方式来发送XHR请求,而不用去关心更底层的$http服务(API、HTTP方法和URL)。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 定制的服务被定义在app/js/services,所以我们需要在布局模板中引入这个文件。另外,我们也要加载angularjs-r esource.js这个文件,它包含了ngResource模块以及其中的$resource服务,我们一会就会用到它们: app/index.html ... ... 服务 app/js/services.js angular.module('phonecatServices', ['ngResource']). factory('Phone', function($resource){ return $resource('phones/:phoneId.json', {}, { query: {method:'GET', params:{phoneId:'phones'}, isArray:true} }); }); 我们使用模块API通过一个工厂方法注册了一个定制服务。我们传入服务的名字Phone和工厂函数。工厂函数和控制器构 造函数差不多,它们都通过函数参数声明依赖服务。Phone服务声明了它依赖于$resource服务。 $resource服务使得用短短的几行代码就可以创建一个RESTful客户端。我们的应用使用这个客户端来代替底层的$htt p服务。 app/js/app.js ... angular.module('phonecat', ['phonecatFilters', 'phonecatServices']). ... 我们需要把phonecatServices添加到phonecat的依赖数组里。 控制器 通过重构掉底层的$http服务,把它放在一个新的服务Phone中,我们可以大大简化子控制器(PhoneListCtrl和PhoneDetailCtr l)。AngularJS的$resource相比于$http更加适合于与RESTful数据源交互。而且现在我们更容易理解控制器这些代码 在干什么了。 图灵社区 http://www.ituring.com.cn - 42 - app/js/controllers.js ... function PhoneListCtrl($scope, Phone) { $scope.phones = Phone.query(); $scope.orderProp = 'age'; } //PhoneListCtrl.$inject = ['$scope', 'Phone']; function PhoneDetailCtrl($scope, $routeParams, Phone) { $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) { $scope.mainImageUrl = phone.images[0]; }); $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; } } //PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone']; 注意到,在PhoneListCtrl里我们把: $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); 换成了: $scope.phones = Phone.query(); 我们通过这条简单的语句来查询所有的手机。 另一个非常需要注意的是,在上面的代码里面,当调用Phone服务的方法是我们并没有传递任何回调函数。尽管这看 起来结果是同步返回的,其实根本就不是。被同步返回的是一个“future”——一个对象,当XHR相应返回的时候会 填充进数据。鉴于AngularJS的数据绑定,我们可以使用future并且把它绑定到我们的模板上。然后,当数据到达时, 我们的视图会自动更新。 有的时候,单单依赖future对象和数据绑定不足以满足我们的需求,所以在这些情况下,我们需要添加一个回调函数 来处理服务器的响应。PhoneDetailCtrl控制器通过在一个回调函数中设置mainImageUrl就是一个解释。 测试 修改我们的单元测试来验证我们新的服务会发起HTTP请求并且按照预期地处理它们。测试同时也检查了我们的控制器 是否与服务正确协作。 $resource服务通过添加更新和删除资源的方法来增强响应得到的对象。如果我们打算使用toEqual匹配器,我们的测试 会失败,因为测试值并不会和响应完全等同。为了解决这个问题,我们需要使用一个最近定义的toEqualDataJasmine匹 配器。当toEqualData匹配器比较两个对象的时候,它只考虑对象的属性而忽略掉所有的方法。 test/unit/controllersSpec.js: describe('PhoneCat controllers', function() { beforeEach(function(){ this.addMatchers({ toEqualData: function(expected) { return angular.equals(this.actual, expected); } AngularJS 入门教程 - 43 - }); }); beforeEach(module('phonecatServices')); describe('PhoneListCtrl', function(){ var scope, ctrl, $httpBackend; beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/phones.json'). respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); scope = $rootScope.$new(); ctrl = $controller(PhoneListCtrl, {$scope: scope}); })); it('should create "phones" model with 2 phones fetched from xhr', function() { expect(scope.phones).toEqual([]); $httpBackend.flush(); expect(scope.phones).toEqualData( [{name: 'Nexus S'}, {name: 'Motorola DROID'}]); }); it('should set the default value of orderProp model', function() { expect(scope.orderProp).toBe('age'); }); }); describe('PhoneDetailCtrl', function(){ var scope, $httpBackend, ctrl, xyzPhoneData = function() { return { name: 'phone xyz', images: ['image/url1.png', 'image/url2.png'] } }; beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData()); $routeParams.phoneId = 'xyz'; scope = $rootScope.$new(); ctrl = $controller(PhoneDetailCtrl, {$scope: scope}); })); it('should fetch phone detail', function() { expect(scope.phone).toEqualData({}); $httpBackend.flush(); expect(scope.phone).toEqualData(xyzPhoneData()); }); }); }); 执行./scripts/test.sh运行测试,你应该会看到如下的输出: Chrome: Runner reset. .... Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms) 总结 完工!你在相当短的时间内已经创建了一个Web应用。在完结篇里面我们会提起接下来应该干什么。 图灵社区 http://www.ituring.com.cn - 44 - AngularJS入门教程:完结篇 我们的应用现在完成了。你可以随意练习这些代码,用git checkout或者goto_step.sh命令切换到之前的步骤。 对于更多我们在教程部分提及的细节以及AngularJS理论的例子,你可以在开发指南中找到。 一些更多的例子,请参照Cookbook。 当你准备好使用AngularJS创建一个新项目时,我们推荐使用AngularJS种子项目来引导你的开发。 我们希望这篇教程对你有用,让你对AngularJS有了足够的了解,并且愿意对其进行更加深入的学习。我们特别期待 着你能够开发出自己的AngularJS应用,或者让你对AngularJS贡献代码产生兴趣。 如果你有什么问题,反馈,或是想跟我们打个招呼,可在社区论坛交流,或者直接向https://groups.google.com/fo rum/#!forum/angular发消息吧!
    还剩44页未读

    继续阅读

    下载pdf到电脑,查找使用更方便

    pdf的实际排版效果,会与网站的显示效果略有不同!!

    需要 10 金币 [ 分享pdf获得金币 ] 1 人已下载

    下载pdf

    pdf贡献者

    sunever

    贡献于2016-04-16

    下载需要 10 金币 [金币充值 ]
    亲,您也可以通过 分享原创pdf 来获得金币奖励!
    下载pdf