中运行。 AngularJS脚本标签： ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚 本，angular.js脚本运行后将会寻找含有 ng-app 指令的HTML标签，该标签即定义了AngularJS应用 的作用域。 双大括号绑定的表达式：

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

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

1 + 2 = {{ 1 + 2 }}

AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 关于angularjs AngularJS中国社区 查看angularjs发表的文章→ 总结 现在让我们转到步骤1，将一些内容添加到web应用程序。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 angularjs发表在入门教程分类，标签AngularJS、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 关于angularjs AngularJS中国社区 查看angularjs发表的文章→ AngularJS入门教程01：静态模板 发表于2012年9月16日angularjs 为了说明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动 态生成相同的列表。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 angularjs发表在入门教程分类，标签AngularJS、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS入门教程02：AngularJS模板 发表于2012年9月21日furtherLee 是时候给这些网页来点动态特性了——用AngularJS！我们这里为后面要加入的控制器添加了一 个测试。 一个应用的代码架构有很多种。对于AngularJS应用，我们鼓励使用[模型-视图-控制器（MVC） 模式][]解耦代码和分离关注点。考虑到这一点，我们用AngularJS来为我们的应用添加一些模型、视图 和控制器。 请重置工作目录： git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表。 步骤1和步骤2之间最重要的不同在下面列出。，你可以到GitHub去看完整的差别。 视图和模板 在AngularJS中，一个视图是模型通过HTML模板渲染之后的映射。这意味着，不论模型什么时候 发生变化，AngularJS会实时更新结合点，随之更新视图。 比如，视图组件被AngularJS用下面这个模板构建出来： ...

• {{phone.name}}

  {{phone.snippet}}

我们刚刚把静态编码的手机列表替换掉了，因为这里我们使用ngRepeat指令和两个用花括号包裹 起来的AngularJS表达式—— {{phone.name}} 和 {{phone.snippet}} ——能达到同样的效果。 在

标签里面的 ng-repeat="phone in phones" 语句是一个AngularJS迭代器。这个迭代器告诉 AngularJS用第一个

标签作为模板为列表中的每一部手机创建一个

元素。 正如我们在第0步时学到的，包裹在 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."}, {"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使用作用域，同时还有模板中的信息，数据模型和控制器。这些可以帮助模型和视图分 离，但是他们两者确实是同步的！任何对于模型的更改都会即时反映在视图上；任何在视图上的更改 都会被立刻体现在模型中。 想要更加深入理解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的官方主页或者JasmineWiki上获得相关知识。 基于AngularJS的项目被预先配置为使用JsTestDriver来运行单元测试。你可以像下面这样运行测 试： 1. 在一个单独的终端上，进入到 angular-phonecat 目录并且运行 ./scripts/test-server.sh 来启动测 试（Windows命令行下请输入 .\scripts\test-server.bat 来运行脚本，后面脚本命令运行方式类 似）； 2. 打开一个新的浏览器窗口，并且转到http://localhost:9876； 3. 选择“Capturethisbrowserinstrictmode”。 这个时候，你可以抛开你的窗口不管然后把这事忘了。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!" 更新你的浏览器，确保显示出来“Hello,World!” 用一个迭代器创建一个简单的表：

row number
{{i}}

现在让数据模型表达式的 i 增加1：

row number
{{i+1}}

确定把 toBe(3) 改成 toBe(4) 之后单元测试失败，然后重新跑一遍 ./scripts/test.sh 脚本 总结 你现在拥有一个模型，视图，控制器分离的动态应用了，并且你随时进行了测试。现在，你可以 进入到步骤3来为应用加入全文检索功能了。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类，标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 《AngularJS入门教程02：AngularJS模板》上有2条评论 lovexiaobai在2013年1月26日15:51说道：登录以回复 在step-0的文件夹里面用gitcheckout-fstep-0重置之后少了文件就是test/lib/下面的三个测试文 件。所以用./scripts/test-server.sh启动服务器测试就有问题。 lovexiaobai在2013年1月26日11:01说道：登录以回复 为什么我运行./scripts/test.sh进行测试，没有出现4下面的结果。？ 要发表评论，您必须先登录。 AngularJS入门教程03：迭代器过滤 发表于2012年9月22日furtherLee 我们在上一步做了很多基础性的训练，所以现在我们可以来做一些简单的事情喽。我们要加入全 文检索功能（没错，这个真的非常简单！）。同时，我们也会写一个端到端测试，因为一个好的端到 端测试可以帮上很大忙。它监视着你的应用，并且在发生回归的时候迅速报告。 请重置工作目录： 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将数据模型最新的状态反映出来。 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 使用 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); }); }); }); 尽管这段测试代码的语法看起来和我们之前用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里写一个端到端 测试多么的简单。尽管这个例子仅仅是一个简单的测试，但是用它来构建任何一个复杂、可读的端到 端测试都很容易。 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 练习 在 index.html 模板中添加一个 {{query}} 绑定来实时显示 query 模型的当前值，然后观察他们是如 何根据输入框中的值而变化。 现在我们来看一下我们怎么让 query 模型的值出现在HTML的页面标题上。 你或许认为像下面这样在 title 标签上加上一个绑定就行了： 但是，当你重载页面的时候，你根本没办法得到期望的结果。这是因为 query 模型仅仅 在 body 元素定义的作用域内才有效。 如果你想让 在 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 bind using('#status').expect(binding('query')).toBe('nexus'); }); 刷新浏览器，端到端测试器会报告测试失败。为了让测试通过，编辑 index.html ，添加一 个 id为“status” 的 div 或者 p 元素，内容是一个 query 绑定，再加上 Current filter: 前 缀。例如：

Current filter: {{query}}

在端到端测试里面加一条 pause(); 语句，重新跑一遍。你将发现测试器暂停了！这样允许你有机会在 测试运行过程中查看你应用的状态。测试应用是实时的！你可以更换搜索内容来证明。稍有经验你就会 知道，这对于在端到端测试中迅速找到问题是多么的关键。 总结 我们现在添加了全文搜索功能，并且完成一个测试证明了搜索是对的！现在让我们继续到步骤4来 看看给我们的手机应用增加排序功能。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类，标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 AngularJS入门教程04：双向绑定 发表于2012年9月22日furtherLee 在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个 新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。 请重置工作目录： git checkout -f step-4 你应该发现除了搜索框之外，你的应用多了一个下来菜单，它可以允许控制电话排列的顺序。 步骤3和步骤4之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 app/index.html： Search: Sort by: Alphabetical Newest

• {{phone.name}}

  {{phone.snippet}}

我们在index.html中做了如下更改： 首先，我们增加了一个叫做 orderProp 的 标签，这样我们的用户就可以选择我们提供的两种 排序方法。 然后，在 filter 过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。 orderBy 过滤器 以一个数组作为输入，复制一份副本，然后把副本重排序再输出到迭代器。 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS在 select 元素和 orderProp 模型之间创建了一个双向绑定。而后， orderProp 会 被用作 orderBy 过滤器的输入。 正如我们在步骤3中讨论数据绑定和迭代器的时候所说的一样，无论什么时候数据模型发生了改变 （比如用户在下拉菜单中选了不同的顺序），AngularJS的数据绑定会让视图自动更新。没有任何笨拙 的DOM操作！ 控制器 app/js/controllers.js： function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet.", "age": 2} ]; $scope.orderProp = 'age'; } 我们修改了 phones 模型——手机的数组——为每一个手机记录其增加了一个 age 属性。我们会根 据 age 属性来对手机进行排序。 我们在控制器代码里加了一行让 orderProp 的默认值为 age 。如果我们不设置默认值，这个模型会在 我们的用户在下拉菜单选择一个顺序之前一直处于未初始化状态。 现在我们该好好谈谈双向数据绑定了。注意到当应用在浏览器中加载时，“Newest”在下 拉菜单中被选中。这是因为我们在控制器中把 orderProp 设置成了‘age’。所以绑定在从我们 模型到用户界面的方向上起作用——即数据从模型到视图的绑定。现在当你在下拉菜单中选 择“Alphabetically”，数据模型会被同时更新，并且手机列表数组会被重新排序。这个时候数 据绑定从另一个方向产生了作用——即数据从视图到模型的绑定。 测试 我们所做的更改可以通过一个单元测试或者一个端到端测试来验证正确性。我们首先来看看单元 测试： test/unit/controllersSpec.js： describe('PhoneCat controllers', function() { describe('PhoneListCtrl', function(){ var scope, ctrl; beforeEach(function() { scope = {}, ctrl = new PhoneListCtrl(scope); }); it('should create "phones" model with 3 phones', function() { expect(scope.phones.length).toBe(3); }); it('should set the default value of orderProp model', function() { expect(scope.orderProp).toBe('age'); }); }); }); 单元测试现在验证了默认值被正确设置。 我们使用Jasmine的接口把 PhoneListCtrl 控制器提取到一个 beforeEach 块中，这个块会被所 有的父块 describe 中的所有测试所共享。 运行这些单元测试，跟以前一样，执行 ./scripts/test.sh 脚本，你应该会看到如下输出（注 意：要在浏览器打开http://localhost:9876并进入严格模式，测试才会运行！）： Chrome: Runner reset. .. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms) 现在我们把注意力转移到端到端测试上来。 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] test/e2e/scenarios.js： ... it('should be possible to control phone order via the drop down select box', function() { //let's narrow the dataset to make the test assertions shorter input('query').enter('tablet'); expect(repeater('.phones li', 'Phone List').column('phone.name')). toEqual(["Motorola XOOM\u2122 with Wi-Fi", "MOTOROLA XOOM\u2122"]); select('orderProp').option('Alphabetical'); expect(repeater('.phones li', 'Phone List').column('phone.name')). toEqual(["MOTOROLA XOOM\u2122", "Motorola XOOM\u2122 with Wi-Fi"]); }); ... 端到端测试验证了选项框的排序机制是正确的。 你现在可以刷新你的浏览器，然后重新跑一遍端到端测试，或者你可以在AngularJS的服务器上 运行一下。 练习 在 PhoneListCtrl 控制器中，把设置 orderProp 那条语句删掉，你会看到AngularJS会在下拉菜单中 临时添加一个空白的选项，并且排序顺序是默认排序（即未排序）。 在 index.html 模板里面添加一个`{{orderProp}}绑定来实时显示它的值。 总结 现在你已经为你的应用提供了搜索功能，并且完整的进行了测试。步骤5我们将学习AngularJS的 服务以及AngularJS如何使用依赖注入。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类，标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 AngularJS入门教程05：XHR和依赖注入 发表于2012年9月23日furtherLee 到现在为止，我们使用是硬编码的三条手机记录数据集。现在我们使用AngularJS一个内置服 务$http来获取一个更大的手机记录数据集。我们将使用AngularJS的依赖注入（dependency injection(DI)）功能来为 PhoneListCtrl 控制器提供这个AngularJS服务。 请重置工作目录： git checkout -f step-5 刷新浏览器，你现在应该能看到一个20部手机的列表。 步骤4和步骤5之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 你项目当中的 app/phones/phones.json 文件是一个数据集，它以JSON格式存储了一张更大的 手机列表。 下面是这个文件的一个样例： [ { "age": 13, "id": "motorola-defy-with-motoblur", "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", "snippet": "Are you ready for everything life throws your way?" ... }, ... ] 控制器 我们在控制器中使用AngularJS服务$http向你的Web服务器发起一个HTTP请求，以此 从 app/phones/phones.json 文件中获取数据。 $http 仅仅是AngularJS众多内建服务中之一，这些 服务可以处理一些Web应用的通用操作。AngularJS能将这些服务注入到任何你需要它们的地方。 服务是通过AngularJS的依赖注入DI子系统来管理的。依赖注入服务可以使你的Web应用良好构 建（比如分离表现层、数据和控制三者的部件）并且松耦合（一个部件自己不需要解决部件之间的依 赖问题，它们都被DI子系统所处理）。 app/js/controllers.js： function PhoneListCtrl($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; } //PhoneListCtrl.$inject = ['$scope', '$http']; $http 向Web服务器发起一个 HTTP GET 请求，索取 phone/phones.json （注意，url是相对 于我们的 index.html 文件的）。服务器用json文件中的数据作为响应。（这个响应或许是实时从后 端服务器动态产生的。但是对于浏览器来说，它们看起来都是一样的。为了简单起见，我们在教程里 面简单地使用了一个json文件。） $http 服务用 success 返回[对象应答][ng.$q]。当异步响应到达时，用这个对象应答函数来处 理服务器响应的数据，并且把数据赋值给作用域的 phones 数据模型。注意到AngularJS会自动检测到 这个json应答，并且已经为我们解析出来了！ 为了使用AngularJS的服务，你只需要在控制器的构造函数里面作为参数声明出所需服务的名 字，就像这样： function PhoneListCtrl($scope, $http) {...} ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 当控制器构造的时候，AngularJS的依赖注入器会将这些服务注入到你的控制器中。当然，依赖 注入器也会处理所需服务可能存在的任何传递性依赖（一个服务通常会依赖于其他的服务）。 注意到参数名字非常重要，因为注入器会用他们去寻找相应的依赖。 '$'前缀命名习惯 你可以创建自己的服务，实际上我们在步骤11就会学习到它。作为一个命名习惯，AngularJS内 建服务，作用域方法，以及一些其他的AngularJSAPI都在名字前面使用一个‘$’前缀。不要使 用‘$’前缀来命名你自己的服务和模型，否则可能会产生名字冲突。 关于JS压缩 由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压 缩 PhoneListCtrl 控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确 的识别出服务了。 为了克服压缩引起的问题，只要在控制器函数里面给 $inject 属性赋值一个依赖服务标识符的数 组，就像被注释掉那段最后一行那样： PhoneListCtrl.$inject = ['$scope', '$http']; 另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制 器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法 函数： var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }]; 上面提到的两种方法都能和AngularJS可注入的任何函数完美协作，要选哪一种方式完全取决于 你们项目的编程风格，建议使用数组方式。 测试 test/unit/controllerSpec.js： 由于我们现在开始使用依赖注入，并且我们的控制器也含有了许多依赖服务，所以为我们的控制 器构造测试就有一点小小的复杂了。我们需要使用 new 操作并且提供给构造器包括 $http 的一些伪 实现。然而，我们推荐的方法（而且更加简单噢）是在测试环境下创建一个控制器，使用的方法和 AngularJS在产品代码于下面的场景下做的一样： describe('PhoneCat controllers', function() { 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}); })); 注意：因为我们在测试环境中加载了Jasmine和angular-mock.js，我们有了两个辅助方 法，module和inject，来帮助我们获得和配置注入器。 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 用如下方法，我们在测试环境中创建一个控制器： 我们使用 inject 方法将$rootScope，$controller和$httpBackend服务实例注入到Jasmine 的 beforeEach 函数里。这些实例都来自一个注入器，但是这个注入器在每一个测试内部都会被重新创 建。这样保证了每一个测试都从一个周知的起始点开始，并且每一个测试都和其他测试相互独立。 调用 $rootScope.$new() 来为我们的控制器创建一个新的作用域。 PhoneListCtrl 函数和刚创建的作用域作为参数，传递给已注入的 $controller 函数。 由于我们现在的代码在创建 PhoneListCtrl 子作用域之前，于控制器中使用 $http 服务获取了 手机列表数据，我们需要告诉测试套件等待一个从控制器来的请求。我们可以这样做： 将请求服务 $httpBackend 注入到我们的 beforeEach 函数中。这是这个服务的一个伪版本，这样做在 产品环境中有助于处理所有的XHR和JSONP请求。服务的伪版本允许你不用考虑原生API和全局状态 ——随便一个都能构成测试的噩梦——就可以写测试。 使用 $httpBackend.expectGET 方法来告诉 $httpBackend 服务来等待一个HTTP请求，并且告诉它如何 对其进行响应。注意到，当我们调用 $httpBackend.flush 方法之前，响应是不会被发出的。 现在， it('should create "phones" model with 2 phones fetched from xhr', function() { expect(scope.phones).toBeUndefined(); $httpBackend.flush(); expect(scope.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); }); 在浏览器里，我们调用 $httpBackend.flush() 来清空（flush）请求队列。这样会使得 $http 服务返 回的promise（什么是promise请参见这里）能够被解释成规范的应答。 我们设置一些断言，来验证手机数据模型已经在作用域里了。 最终，我们验证 orderProp 的默认值被正确设置： it('should set the default value of orderProp model', function() { expect(scope.orderProp).toBe('age'); }); ; 执行 ./scripts/test.sh 脚本来运行测试，你应该会看到如下输出： Chrome: Runner reset. .. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms) Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms) 练习 在index.html末尾添加一个 {{phones | json}} 绑定，观察json格式的手机列表。 在 PhoneListCtrl 控制器中，把HTTP应答预处理一下，使得只显示手机列表的前五个。在 $http 回调 函数里面使用如下代码： $scope.phones = data.splice(0, 5); 总结 现在你应该感觉得到使用AngularJS的服务是多么的容易（这都要归功于AngularJS服务的依赖注 入机制），转到步骤6，你会为手机添加缩略图和链接。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类，标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 AngularJS入门教程06：链接与图片模板 发表于2012年9月23日furtherLee 这一步，你会为手机列表的手机添加缩略图以及一些链接，不过这些链接还不会起作用。接下来 你会使用这些链接来分类显示手机的额外信息。 请重置工作目录： git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了。 步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 注意到现在 phones.json 文件包含了唯一标识符和每一部手机的图像链接。这些url现在指 向 app/img/phones/ 目录。 app/phones/phones.json：（样例片段）： [ { ... "id": "motorola-defy-with-motoblur", "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", ... }, ... ] 模板 app/index.html： ...

• {{phone.name}}

  {{phone.snippet}}

... 这些链接将来会指向每一部电话的详细信息页。不过现在为了产生这些链接，我们在 href 属性 里面使用我们早已熟悉的双括号数据绑定。在步骤2，我们添加了 {{phone.name}} 绑定作为元素内 容。在这一步，我们在元素属性中使用 {{phone.id}} 绑定。 我们同样为每条记录添加手机图片，只需要使用ngSrc指令代替 的 src 属性标签就可以 了。如果我们仅仅用一个正常 src 属性来进行绑定（ ），浏览器会把AngularJS的 {{ 表达式 }} 标记直接进行字面解释，并且发 起一个向非法url http://localhost:8000/app/{{phone.imageUrl}} 的请求。因为浏览器载入页面 时，同时也会请求载入图片，AngularJS在页面载入完毕时才开始编译——浏览器请求载入图片 时 {{phone.imageUrl}} 还没得到编译！有了这个 ngSrc 指令会避免产生这种情况，使用 ngSrc 指 令防止浏览器产生一个指向非法地址的请求。 测试 test/e2e/scenarios.js： ... it('should render phone specific links', function() { input('query').enter('nexus'); element('.phones li a').click(); expect(browser().location().url()).toBe('/phones/nexus-s'); }); ... ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 我们添加了一个新的端到端测试来验证应用为手机视图产生了正确的链接，上面就是我们的实 现。 你现在可以刷新你的浏览器，并且用端到端测试器来观察测试的运行，或者你可以在AngularJS 服务器上运行它们。 练习 将 ng-src 指令换成普通的 src 属性。用像Firebug，ChromeWebInspector这样的工具，或 者直接去看服务器的访问日志，你会发现你的应用向 /app/%7B%7Bphone.imageUrl%7D%7D （或 者 /app/{{phone.imageUrl}} ）发送了一个非法请求。 这个问题是由于浏览器会在遇到 img 标签的时候立刻向还未得到编译的URL地址发送一个请求， AngularJS只有在页面载入完毕后才开始编译表达式从而得到正确的图片URL地址。 总结 如今你已经添加了手机图片和链接，转到步骤7，我们将学习AngularJS的布局模板以及 AngularJS是如何轻易地为应用提供多重视图。 版权声明：中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类，标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论，您必须先登录。 AngularJS入门教程07：路由与多视图 发表于2012年9月23日furtherLee 在这一步，你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 请重置工作目录： git checkout -f step-7 注意到现在当你转到 app/index.html 时，你会被重定向到 app/index.html#/phones 并且相 同的手机列表在浏览器中显示了出来。当你点击一个手机链接时，一个手机详细信息列表也被显示了 出来。 步骤6和步骤7之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 多视图，路由和布局模板 我们的应用正慢慢发展起来并且变得逐渐复杂。在步骤7之前，应用只给我们的用户提供了一个简 单的界面（一张所有手机的列表），并且所有的模板代码位于 index.html 文件中。下一步是增加一 个能够显示我们列表中每一部手机详细信息的页面。 为了增加详细信息视图，我们可以拓展 index.html 来同时包含两个视图的模板代码，但是这样 会很快给我们带来巨大的麻烦。相反，我们要把 index.html 模板转变成“布局模板”。这是我们应 用所有视图的通用模板。其他的“局部布局模板”随后根据当前的“路由”被充填入，从而形成一个 完整视图展示给用户。 AngularJS中应用的路由通过$routeProvider来声明，它是$route服务的提供者。这项服务使得 控制器、视图模板与当前浏览器的URL可以轻易集成。应用这个特性我们就可以实现深链接，它允许 我们使用浏览器的历史(回退或者前进导航)和书签。 关于依赖注入（DI），注入器（Injector）和服务提供者（Providers） 正如从前面你学到的，依赖注入是AngularJS的核心特性，所以你必须要知道一点这家伙是怎么 工作的。 当应用引导时，AngularJS会创建一个注入器，我们应用后面所有依赖注入的服务都会需要它。 这个注入器自己并不知道 $http 和 $route 是干什么的，实际上除非它在模块定义的时候被配置过， 否则它根本都不知道这些服务的存在。注入器唯一的职责是载入指定的服务模块，在这些模块中注册 所有定义的服务提供者，并且当需要时给一个指定的函数注入依赖（服务）。这些依赖通过它们的提 供者“懒惰式”（需要时才加载）实例化。 提供者是提供（创建）服务实例并且对外提供API接口的对象，它可以被用来控制一个服务的创建 和运行时行为。对于 $route 服务来说， $routeProvider 对外提供了API接口，通过API接口允许你 为你的应用定义路由规则。 AngularJS模块解决了从应用中删除全局状态和提供方法来配置注入器这两个问题。和 AMD 或 者 require.js 这两个模块（非AngularJS的两个库）不同的是，AngularJS模块并没有试图去解决脚 本加载顺序以及懒惰式脚本加载这样的问题。这些目标和AngularJS要解决的问题毫无关联，所以这些 模块完全可以共存来实现各自的目标。 App 模块 app/js/app.js： angular.module('phonecat', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDe otherwise({redirectTo: '/phones'}); }]); 为了给我们的应用配置路由，我们需要给应用创建一个模块。我们管这个模块叫做 phonecat ， 并且通过使用 config API，我们请求把 $routeProvider 注入到我们的配置函数并且使 用 $routeProvider.when API来定义我们的路由规则。 注意到在注入器配置阶段，提供者也可以同时被注入，但是一旦注入器被创建并且开始创建服务 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 实例的时候，他们就不再会被外界所获取到。 我们的路由规则定义如下： 当URL映射段为 /phones 时，手机列表视图会被显示出来。为了构造这个视图，AngularJS会使 用 phone-list.html 模板和 PhoneListCtrl 控制器。 当URL映射段为 /phone/:phoneId 时，手机详细信息视图被显示出来。这里 :phoneId 是URL的变量部 分。为了构造手机详细视图，AngularJS会使用 phone-detail.html 模板和 PhoneDetailCtrl 控制 器。 我们重用之前创造过的 PhoneListCtrl 控制器，同时我们为手机详细视图添加一个新 的 PhoneDetailCtrl 控制器，把它存放在 app/js/controllers.js 文件里。 $route.otherwise({redirectTo: '/phones'}) 语句使得当浏览器地址不能匹配我们任何一个 路由规则时，触发重定向到 /phones 。 注意到在第二条路由声明中 :phoneId 参数的使用。 $route 服务使用路由声 明 /phones/:phoneId 作为一个匹配当前URL的模板。所有以 : 符号声明的变量（此处变量 为 phones ）都会被提取，然后存放在$routeParams对象中。 为了让我们的应用引导我们新创建的模块，我们同时需要在ngApp指令的值上指明模块的名字： app/index.html： ... 控制器 app/js/controllers.js： ... function PhoneDetailCtrl($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; } //PhoneDetailCtrl.$inject = ['$scope', '$routeParams']; 模板 $route 服务通常和ngView指令一起使用。 ngView 指令的角色是为当前路由把对应的视图模板 载入到布局模板中。 app/index.html： ...

注意，我们把 index.html 模板里面大部分代码移除，我们只放置了一个

容器，这 个

具有 ng-view 属性。我们删除掉的代码现在被放置在 phone-list.html 模板中： app/partials/phone-list.html ：

Search:

Sort by: Alphabetical Newest