AngularJS 入门教程

huibiaoli

贡献于2014-09-04

字数:0 关键词: JavaScript开发

AngularJS入门教程:导言和准备 发表于2012年9月2日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介绍文档,请查看快速开始文档。 搭建学习环境 无论是Mac、Linux或Windows环境中,您均可遵循本教程学习编程。您可以使用源代码管理版 本控制系统Git获取本教程项目的源代码文件,或直接从网上下载本教程项目源代码文件的镜像归档压 缩包。 1. 在Mac、Linux或Windows系统中安装Java运行环境,进行单元测试时需要运行Java程序,以下命令可 检测您的系统是否已安装Java运行环境: ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 关于angularjs AngularJS中国社区 查看angularjs发表的文章→ java -version 2. 安装Git工具,然后用以下命令从Github复制本教程项目的源代码文件: git clone git://github.com/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的一个好方法是创建经典应用程序“HelloWorld!”: 1. 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html。 2. 将下面的源代码复制到您的HTML文件。 3. 在web浏览器中打开这个HTML文件。 源代码 Hello {{'World'}}! 运行效果 HelloWorld! 打开网页应看到如下效果: 现在让我们仔细看看代码,看看到底怎么回事。当加载该页时,标记 ng-app 告诉AngularJS处 理整个HTML页并引导应用: 这行载入AngularJS脚本: (想了解AngularJS处理整个HTML页的细节,请看Bootstrap。) 最后,标签中的正文是应用的模板,在UI中显示我们的问候语: Hello {{'World'}}! 注意,使用双大括号标记 {{}} 的内容是问候语中绑定的表达式,这个表达式是一个简单的字符 串‘World’。 下面,让我们看一个更有趣的例子:使用AngularJS对我们的问候语文本绑定一个动态表达式。 Hello AngularJS World! 本示例演示AngularJS的双向数据绑定(bi-directionaldatabinding): 1. 编辑前面创建的helloworld.html文档。 2. 将下面的源代码复制到您的HTML文件。 3. 刷新浏览器窗口。 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 源代码 Your name:
Hello {{yourname || 'World'}}! 运行效果 Yourname: World HelloWorld! 打开网页应看到如下效果: 该示例有一下几点重要的注意事项: 文本输入指令 绑定到一个叫 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应用的各部分,以及它们协同工作原理: AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 《AngularJS快速开始》上有1条评论 关于angularjs AngularJS中国社区 查看angularjs发表的文章→ 此外,AngularJS还提供了一些非常有用的服务特性: 1. 底层服务包括依赖注入,XHR、缓存、URL路由和浏览器抽象服务。 2. 您还可以扩展和添加自己特定的应用服务。 3. 这些服务可以让您非常方便的编写WEB应用。 版权声明:中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 angularjs发表在入门教程分类,标签AngularJS、入门教程。将本文加入收藏夹。 angularjs在2012年9月16日09:53说道:登录以回复 朋友们有疑问或者建议尽管留言 要发表评论,您必须先登录。 AngularJS入门教程00:引导程序 发表于2012年9月15日angularjs 我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的 源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。 1. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改 成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。 1. 按照下面的操作您可以在浏览器中运行应用: node.js用户: A. 可以在独立的命令行终端运行 ./scripts/web-server.js 或者 node scripts/web-server.js 来启动服务器,启动后命令行终端将会提示 Http Server running at http://localhost:8000 ,请不要关闭该终端,关闭该终端即关闭了服务器; B. 在浏览器中输入http://localhost:8000/app/index.html来访问我们的应用。 使用其它HTTP服务器的用户: A. 请配置服务器使其驱动angular-phonecat项目; B. 在浏览器中输入 http://localhost:[port-number]/[context-path]/app/index.html 来访 问我们的应用。 现在,在浏览器中您应该已经看到了我们的初始应用,很简单,但说明我们的项目已经可以运行 了。 应用中显示的“Nothinghereyet!”是由如下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应用 的作用域。 双大括号绑定的表达式:

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 标签上加上一个绑定就行了: 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 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:
    • {{phone.name}}

      {{phone.snippet}}

    我们在index.html中做了如下更改: 首先,我们增加了一个叫做 orderProp 的 Sort by:
  • AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607]
    同时我们为手机详细信息视图添加一个占位模板。 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的服务器上 运行一下。 练习 试着在 index.html 上增加一个 {{orderProp}} 绑定,当你在手机列表视图上时什么也没变。 这是因为 orderProp 模型仅仅在 PhoneListCtrl 管理的作用域下才是可见的,这与
    元素相关。如果你在 phone-list.html 模板中加入同样的绑定,那么这个绑定会按你设想的 那样被渲染出来。 总结 设置路由并实现手机列表视图之后,我们已经可以进入步骤8来实现手机详细信息视图了。 版权声明:中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类,标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论,您必须先登录。 AngularJS入门教程08:更多模板 发表于2012年9月23日furtherLee 在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示 出来。 请重置工作目录: 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 。 模板 phone-detail.html文件中原有的TBD占位行已经被列表和构成手机详细信息的绑定替换掉了。 注意到,这里我们使用AngularJS的 {{表达式}} 标记和 ngRepeat 来在视图中渲染数据模型。 app/partials/phone-detail.html: ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录

    {{phone.name}}

    {{phone.description}}

    测试 我们来写一个新的单元测试,这个测试和我们在步骤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) 同时,我们也添加一个端到端测试,指向NexusS手机详细信息页面并且验证页面的头部 是“NexusS”。 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中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 练习 使用AngularJS端到端测试API写一个测试,用它来验证我们在NexusS详细信息页面显示的四个 缩略图。 总结 现在手机详细页面已经就绪了,在步骤9中我们将学习如何写一个显示过滤器。 版权声明:中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类,标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论,您必须先登录。 AngularJS入门教程09:过滤器 发表于2012年9月23日furtherLee 在这一步你将学习到如何创建自己的显示过滤器。 请重置工作目录: 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: ...
    Infrared
    {{phone.connectivity.infrared | checkmark}}
    GPS
    {{phone.connectivity.gps | checkmark}}
    ... ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 测试 过滤器和其他组件一样,应该被测试,并且这些测试实际上很容易完成。 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中加入如下绑定: {{ "lower cap string" | uppercase }} {{ {foo: "bar", baz: 23} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} 我们也可以用一个输入框来创建一个模型,并且将之与一个过滤后的绑定结合在一起。在index.html中 加入如下代码: Uppercased: {{ userInput | uppercase }} 总结 现在你已经知道了如何编写和测试一个定制化插件,在步骤10中我们会学习如何用AngularJS继 续丰富我们的手机详细信息页面。 版权声明:中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类,标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论,您必须先登录。 AngularJS入门教程10:事件处理器 发表于2012年9月23日furtherLee 在这一步,你会在手机详细信息页面让手机图片可以点击。 请重置工作目录: 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。 测试 为了验证这个新特性,我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图 片。第二个测试点击几个缩略图并且验证主图片随之合理的变化。 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() { ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录 AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 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中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类,标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 要发表评论,您必须先登录。 AngularJS入门教程11:REST和定制服务 发表于2012年9月23日furtherLee 在这一步中,我们会改进我们APP获取数据的方式。 请重置工作目录: git checkout -f step-11 对我们应用所做的最后一个改进就是定义一个代表RESTful客户端的定制服务。有了这个客户端我 们可以用一种更简单的方式来发送XHR请求,而不用去关心更底层的$http服务(API、HTTP方法和 URL)。 步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 模板 定制的服务被定义在app/js/services,所以我们需要在布局模板中引入这个文件。另外,我们也 要加载angularjs-resource.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客户端。我们的应用使用这个客户 端来代替底层的$http服务。 app/js/app.js. ... angular.module('phonecat', ['phonecatFilters', 'phonecatServices']). ... 我们需要把 phonecatServices 添加到 phonecat 的依赖数组里。 控制器 通过重构掉底层的$http服务,把它放在一个新的服务 Phone 中,我们可以大大简化子控制器 ( PhoneListCtrl 和 PhoneDetailCtrl )。AngularJS的$resource相比于 $http 更加适合于与 RESTful数据源交互。而且现在我们更容易理解控制器这些代码在干什么了。 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 匹配器,我们的测试会失败,因为测试值并不会和响应完全等同。为了解决这个问题,我 们需要使用一个最近定义的 toEqualData Jasmine匹配器。当 toEqualData 匹配器比较两个对象的 时候,它只考虑对象的属性而忽略掉所有的方法。 test/unit/controllersSpec.js: describe('PhoneCat controllers', function() { beforeEach(function(){ this.addMatchers({ toEqualData: function(expected) { return angular.equals(this.actual, expected); } }); }); 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() { AngularJS中文社区&&AngularJS英文官网&&代码许可The MIT License&&文档许可CC BY 3.0 ©2012AngularJS.cn|PoweredbyWordPress&bbPress|[湘ICP备12011607] 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应用。在完结篇里面我们会提起接下来应该干什 么。 版权声明:中文文档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入门教程12:完结篇》上有2条评论 AngularJS入门教程12:完结篇 发表于2012年9月23日furtherLee 我们的应用现在完成了。你可以随意练习这些代码,用 git checkout 或者 goto_step.sh 命令 切换到之前的步骤。 对于更多我们在教程部分提及的细节以及AngularJS理论的例子,你可以在开发指南中找到。 一些更多的例子,请参照Cookbook。 当你准备好使用AngularJS创建一个新项目时,我们推荐使用AngularJS种子项目来引导你的开 发。 我们希望这篇教程对你有用,让你对AngularJS有了足够的了解,并且愿意对其进行更加深入的 学习。我们特别期待着你能够开发出自己的AngularJS应用,或者让你对AngularJS贡献代码产生兴 趣。 如果你有什么问题,反馈,或是想跟我们打个招呼,可在社区论坛交流,或者直接 向https://groups.google.com/forum/#!forum/angular发消息吧! 版权声明:中文文档AngularJS中文社区&&英文文档AngularJS官网&&代码许可The MIT License&&文档许可CC BY 3.0 furtherLee发表在入门教程分类,标签AngularJS、furtherLee、入门教程。将本文加入收藏夹。 tester在2013年1月7日11:01说道:登录以回复 有没有打包下载整套教程的啊? angularjs在2013年1月8日17:10说道:登录以回复 GitCafe可gitclone 要发表评论,您必须先登录。 ← 上一篇 下一篇 → 资讯 文档 社区 关于 搜索 注册登录

    下载文档,方便阅读与编辑

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

    需要 10 金币 [ 分享文档获得金币 ] 2 人已下载

    下载文档

    相关文档