推荐：20个有用的Angular.js工具
招聘信息：
原文：，参与译者：, , , , 喜欢Angular.js？我们为开发者编写了一份最佳angular.js工具和资源清单，这可让使用 angular 开发应用程序变得高效。对于大多数想要设计动态Web应用的开发者而言，Angular.js 成为了一个可以选择的框架。angularjs 开发者如果想开始一个 AngularJS 工程，为了采取成熟的方式开发网页，他们或许需要很多工具。为了减轻使用AngularJS开发Web应用的负担，这里列出了几个出色的工具，包括测试、前端开发、编辑、函数库、扩展、模块、代码生成器、网格工具。Angular.js开发最佳IDEAngular.js 需要的大部分集成开发环境（IDE）和轻量级的编辑器列在了下面。Webstorm是一个出色的代码编辑器，它完全理解工程，可以为任何类型的网站提供高质量的代码。它支持所有最流行最新的网站开发技术。使用这个工具开发网站，可以很好地集成单点或流程。Aptana 是一具集成开发环境，可以帮助你优雅地创建网站应用。使用它做为 AngularJS 的集成开发工具，你需要在 Eclipse 商店激活 AngularJS Eclipse 扩展。对 AngularJS Web 开发者来说，方便的文本编辑工具是 Sublime。它帮助程序员使用快捷方式或几个按键实现编码。它具有很强的适应性，可以定制任何类型的编程环境。它也可以按照你的意愿分块编辑。它还可以轻松地在项目之间切换，所有的修改都将自动保存在各自的项目中。Angular.js 的专用测试工具测试是开发的重要组成部分，无论对于使用 Angular.js 还是任何其他软件都是如此。下面的工具可以帮助你简化采用 Angular.js 开发的应用程序的测试。这些工具都是在线 JavaScript 测试工具的好伴侣。Protractor 是一个端到端的测试框架，贯穿于 AngularJS，是一个完全自动化的测试工具。它可以运行在真实的浏览器中测试你的应用程序。它使用了 WebDriver，Mocha, jasmine, Node.js, selenium 和cucumber 等都使用的伟大的技术。当所有的待处理网页任务完成时，它会自动使用AngularJS的应用进行通信。所以，你在测试时不需要使用等待或睡眠命令。Jasmine 是一个行为驱动开发框架，专为 Javascript 用户创建。它提供了基本的测试框架，并且可以持续维护。所有测试都可以使用一个 all-in-one 的包完成，这是 Jasmine 的主要特点，高效测试你的应用。这个框架的一个缺点是它不能感知运行平台（浏览器）。如果配合Karma使用这个问题很容易避免。Karma 可以做为测试运行者配合 Jasmine 使用。它是一个测试框架帮且你高效地测试应用。它是一个绝对意义上的前端开发工具帮助你创建和测试网站应用。你可以实时写代码，根据建议修改代码，以同样的格式保存代码。通过这个工具修改后的代码会自动布署到运行中的应用。最好的 Angular.js 函数库下面是一些有用的库，它们可以增强 angular.js 框架的能力，对开发者有所帮助。没有必要从头构建那些可能已经成为开放源码的函数库。对于所有 HTML，CSS 和 JavaScript 的前端开发者，CodePen 是一款完美的编辑工具。这个工具可以最大限度地减少对网站的创建、测试和完善的繁琐的网页开发工作。它是一个协作的在线编程环境。Web开发人员可以清晰地跨平台实时查看。它有一个浏览器中的代码编辑器，可以自动地迅速地上传多个文件。这个功能可协助 Web 开发人员在几秒的时间内创建一个新的代码。使用 Angular Fire，可以轻松地帮助你开发 AngularJS 的应用后台。AngularJS 绑定的 Firebase 已经正式被 Angular Fire 支持。Firebase 是一个基于云计算的平台，可以很容易地集成实时应用和快速创建后台。当 Firebase 和 Angular Fire 组合在一起，它们有助于以更快的速度同步数据和提供良好的用户管理服务。它还提供了一个三向的数据绑定、用户身份验证和静态托管。AngularJS 以高效率创建单页面应用而出名. 创建这些单页面应用时候，我们需要一个灵活的路由，这个优秀的 AngularJS 框架是构建一个全面的 UI 组件俗称 ui-router。 它能根据应用程序的状态提供一个简单的导航和改变视图,而不仅仅是基于 URL。AngularUI 还包含非常多的 UI 组件，这些组件是使用原生指令像 ui—maps,ui-calendar，ui-Bootstrap 创建的。这些UI组件和指令可以更快建设 Angular 网站UI Bootstrap 是一个不同寻常的 AngularUI 组件，它能帮助你创建基于智能手机的 web 应用程序，而且用户体验不错。这个 UI 组件提供的 AngularJS 原生指令完全兼容 Twitte Bootstrap。Angular.js 有用的扩展和工具下面是一些 Angular.js 扩展，可以满足一些特殊应用之需。Ng-Inspector 是一个优秀的浏览器插件，支持 Firefox，Chrome 和 Safari,复用它可以创建一个探测控制面板，方便开发，调试 AngularJS 应用，它提供了完整的辅助功能。使用它可以更方便的和你的应用交互，还可以实时更新。它还可以看到全部范围内的层次结构，模型，类型和值。点击你关注的一个范围，它会高亮显示相应的 DOM 结点。你可以使用 AngularJS Batarang 来调试你的 AngularJ S应用，它是一个专为 Chrome 提供的插件。它帮助你改善应用性能。还可能衡量调节性能的进度。AngularJS 独有的一个服务是 Restangular，它可以帮助您轻松应对各种要求，例如获取、发送、删除以及把数据存入数据库。它对于所有从 RESTful API 中大规模存取数据的 AngularJS 应用都很有必要。Generator Angular - 一个有用的工具你可以很容易地开始一个具有合理的默认值和最好的用例的项目。建立这样的 Angular 应用，这款 Yeomen generator 工具是非常有用的。它只需几条终端的命令，便加速了 AngularJS 应用的开发过程。这个工具是非常有用的。这些专用的生成工具将有助于应用了解项目的有关信息，并有助于开发和测试应用程序。Angular Deckgrid 可以为你提供响应度和颜值俱高的应用，可以适配不同的移动终端。轻量级类砖石结构易于创建灵活的表格，高效创建图片展示。Radian 是一个优秀的框架，使用它只需要少量的设置就可以开启 AngularJS 项目。在多人开发项目中它是一个理想的选择。Lumx 以快速简单的方式帮助你创建简单而优雅的应用。 这个可响应式前端框架是基于AngularJS 和Google 材料设计规范。这个工具可嵌入最新的技术，如 Sass 预处理器，AngularJS 和 JQuery，能极大地提高 web 应用的性能。你可以用英语编码，在编码需要被翻译的地方加上注解。Angular Gettext 工具就会自动翻译那些独立的部分。这是 AngularJS 非常简单而强大的翻译支持工具。AngularJS 框架内置 ngDocs 工具可以简化你项目文档和参考手册的相关工作。这款基于 Android 的工具也能提供给所有新手一些容易跟进的教程。无论是简单还是复杂的Web应用，在 AngularJS 框架中很容易创建一个表格，然后通过实用的 ngTables 工具进行高效的管理。ngTable 是 AngularJS 表格指令，支持排序，过滤和分页，在编译步骤中自动生成带有标题和过滤器的标题行。ngTable支持定制过滤选项，表格分组，表格外部数据控制等等功能。总的来说，这些都是创建任意 AngularJS Web 应用的，最有用的工具集合。用好这些工具可以帮助你轻松高效的创建 AngularJS 项目。希望这些对大家有所帮助，如果还有其他软件遗漏，可以在评论中补充：）
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量3789点击量3255点击量3036点击量2980点击量2861点击量2770点击量2763点击量2739点击量2574
&2016 Chukong Technologies,Inc.
京公网安备89　　英文原文：
　　我这里提到的观点是程序员相当熟悉的。我来自 90 年代早期的C语言世界。有很少的可用工具，我不得不为每个小东西写一个链接列表。我乐此不疲，毫无怨言。现在看起来蠢多了。但是，这就是世界本来的样子，你不得不一点一点地写代码。
　　如今编程情景与往日大大不同了。因为开源、StackOverflow，当然还有 Google，产生了很多协作。每个问题都被人问过了，还有一堆回答。对于程序员这算作快乐的时光，可用的框架和工具的数量十分惊人。
　　我上手了 Servlets、JSP、JQuery、JS、AngularJS 等等，到现在，我在 AngularJS 上花了一年多的时间。我有一分为二的观点，不是关于它能解决什么问题，而是对于来自各个社区的程序员所能获得的信息。有太多不同的声音和不同的方式在解释着同样的问题。我担心我在这里写的观点也能引发讨论。与K&R C【注1】做个比较，一本也是唯一一本权威的、精确的、清晰的解释C语言的书。当然，还有其它书。但是，解决了编程结构的、非常详细的语法和语义的语言可以在一本小书里完美地表达出来。如何根据它去解决问题，在很多带有实例的其它书里做了解释。就是这样。
　　现在，有了网络，每个人都成为了作家。每个问题 Google 都能抛出一百多万个链接。那么你究竟怎么才能就某个问题给出一个简单、清晰的答案？答案是非常简单的，只是迷失了，我的意思是，迷失在了信息的海洋里。这是你为民主付出的代价。数百万的声音，无数的东东。看看，我并不同意我要说的观点。
　　到处都有 AngularJS 的代码示例和 demo，如果你对 JavaScript 认识足够多，可以理解 JavaScript 设计模式、控制反转（Inversion of Control，缩写为 IoC）、范围阶层（scope hierarchy），依赖注入【注2】、面向对象 JS 以及发布/订阅通知【注3】等等，就好像能够做得很好。然而，并没有一样东西来给你解释其原理以及讨论 AngularJS 如何引入这些方面的。拥有海量的 demo 和特定例子。O&Reilly 的 AngularJS 书根本没有覆盖到以一种简单方式、让所有人理解的基础方面。这只是我曾经看过的唯一一本书。很多次，语法杂乱，难以理解。只有你花了 1 年时间才能弄明白。你也被一直混在一起的中括号、大括号和$符搞晕。胆小的肯定就躲了。
　　由于存在很多已有的、解决问题的不同变体，在某人想解决头疼的业务问题时，它放大了这种痛苦。语法令人悲催，如果你是新手，刚刚接触的时候，能够带来进度上的巨大延期。没有来自 AngularJS 团队或提供支持的其他人的视频，这本应该通过简单地阅读语法来简化生活的，却徒增烦恼。
　　还有这是关于测试的喋喋不休，测试所有地方减轻压力是不错。AngularJS 有来自于像 Yo、Grunt、Bower、Karma、Jasmine 等社区的稳定的工具支持。我后来才试用了一些工具。特别地，我发现就像使用 AngularJS 框架一样，这些工具也缺乏解释其原理以及与其它工具如何关联的简化文档。
　　举个例子，Yo 是一个脚手架服务，用来生成 AngularJS 文件的模板，它与 Bower 交互来下载依赖项、用 Grunt 运行任务。用简单的可视化图表就可以解释清楚，而不需要立即深入配置的、大量的文字或 demo 示例。
　　毫无疑问，一旦你熟悉了，它们会简化工作。但如我所言，对新手就不是这样了，它们看到要尝试的数量和初期花费的时间就敬而远之了。
　　我请求过这些工具的作者，让他们用更为简洁的英语、可视化的东东以及例子来提供更加简单、更加基本的说明，而不仅仅只是绝对没有解释、反而期望读者自己搞清楚的、demo 的代码片段。
　　为了明白什么是更好的解释，我给出关于 AngularJS 作用域的链接。这更为基本、图文并茂以及涵盖了大量脚本。
　　如果你认为我是在抵制 AngularJS，那就错了。我尊重团队所付出的努力，尊重不计成本解决问题的社区，尊重他们解决纠缠在一起的 HTML/CSS/JS 来让生活更美好的各种方式。我用了，并从中受益。唯有的抱怨就是理解它们（我这里说的理解，是指用简单的方式搞清楚它们）所遇到的、刚开始的难度，新手能够编写复杂行为的代码，会碰到整个网络协作中的术语和问题，让人费解。
　　这些新工具需要在文档内容上有更大改善，这些工具是由在 StackOverflow 回答问题的聪明人编写的，不要只是就为什么展望一个东东以及他们如何用每个人可以理解的方式解决问题张贴文档。
　　为了结束本文，我举个例子，我花了一天才搞定某个问题的例子。我当时使用 Yo/Grunt 运行着关于 AngularJS 指令的 Karma 测试，我出错的地方是，在 karma.conf.js，我把带有 AngularJS 的脚本放在了我自己脚本的后面，结果没有编译我的指令，也就没有生成 HTML，JQuery 也找不到。对于创造这些工具的人来说，这可能是一个简单的、低级的错误。还有，这可能与 AngularJS 或 Karma 没有关系，可能这是 JS 里依赖载入的问题。然而，既然我对这些都不熟，我只好搜寻了每个地方，从语法到配置文件、到 StackOverflow、Google，不知疲倦地尝试了很多不同的选项，直到最后，关于指令没有被生成的 HMTL 错误才被我发现。
　　天哪！生活应该比这更美好的。
注1：K&R 是C语言的开发者 Brian W.Kernighan,Dennis M.Ritchie （人名），C是指他们的著作《C程序设计语言》，被誉为C语言&圣经&，所有C程序开发人员都必看的书，但书内容过于简洁，不适用于初学者。
注2：控制反转（Inversion of Control，缩写为 IoC），是面向对象编程中的一种设计原则，可以用来减低计算机代码之间的耦合度。其中最常见的方式叫做依赖注入（Dependency Injection，简称 DI），还有一种方式叫&依赖查找&（Dependency Lookup）。
注3：发布/订阅（Publish/subscribe 或 pub/sub）是一种消息范式，消息的发送者（发布者）不是计划发送其消息给特定的接收者（订阅者）。2013年度最强AngularJS资源合集 - Web前端 - ITeye资讯
AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
AngularJS诞生以来，吸引了大量的目光，也迅速成为了Web开发领域的新宠。本文整理了2013年度一些非常有价值的AngularJS相关教程和资源，如果你想了解AngularJS或正在使用AngularJS，那么这些资源肯定会为你的学习和进阶过程带来帮助。 一、了解AngularJS
二、中文资源 1.
中文系列资源
– 大漠穷秋
– AngularJS中文社区
其他单篇文章
三、英文资源 1.
AngularJS入门教程
AngularJS指令学习
AngularJS应用开发实战
AngularJS游戏开发
AngularJS工作流程和测试
AngularJS书籍
英文资源出处：。希望上述资源可以为你在2014年深入学习AngularJS带来帮助。
& 说到Angular JS刚读到一片美国构架师的文章关于使用Angular JS在Microsoft平台上进行编程，达到高效web管理这个平台免费使用的下载地址：http://www.asp.net/请表叫我雷锋!我手痒，顺带把那文章译啦 ！博客里有http://www.iteye.com/topic/1141273
angularJS课程：后续的还会有angularJS的课程上线。
我这是用Nodejs写的：http://www.hubwiz.com/coursecenter
&&& 光就是小编整理的这些链接资料就值得点赞！！！！小编辛苦了。
来看我的视频教程，国内第一款完整的AngularJS视频教程http://www.imooc.com/learn/156
高质量文章啊，希望多多出品
司徒正美 写道必须赞个
用了一段时间avalon感觉比angular简单点新手推荐两个都看看
yixiandave 写道w 写道这个对比Ember.js 怎么样？分别研究了一段时间Ember和Angular，最后我们采用了AngularAngular代码看起来更清晰简洁，使用也更方便Ember的Handlebars模板语言不是很习惯。最大的硬伤是判断逻辑居然不支持js表达式，除了提供的几种判断函数以外如果需要扩展只能自己往Handlebars加插件。还一个硬伤是不支持动画渐变的切换，虽然我找到了一个ember-animate的插件，但是最终也没弄明白应该怎么用而且Ember的MVC+Router的模式限制比较死，对开发者要求高，学习成本也比Angular高不少。就拿我自己来说，Ember.js我花了3天时间才大致写出来一个Demo而Angular我只用了一下午avalon只用一小时https://github.com/RubyLouvre/avalon比angular更易学更易入门，性能更好（使用Object.defineProperty与VBScript实现更即时的双向绑定），兼容性更好，IE6+（可以到我的五群，问一下 ）例子更多更全面也有一个小小的生态圈，有验证框架，UI框架，动画库，路由，AJAX也有一些成功案例 http://www.cnblogs.com/rubylouvre/p/3468139.html有专门的入门教程指导 http://www.cnblogs.com/rubylouvre/p/3181291.html
AngularJS学习笔记 – 邹业盛这篇文章最详细啊，高山仰止！
其实我更关心适用于那些环境以及兼容性
相对Ember, Backbone, Knockout 来讲，AngularJS的数据动态双向绑定比较有吸引力，不需要手动设置。以前看过一篇文章，讲述从 Backbone 迁移支 AngluarJS 代码节省了一半。目前 AngluarJS 的生态圈比较完整， Github.com 上的流行的 AngluarJS 项目不少，比较出名的 AngularUI， 等等。但 AngularJS 真的不简单，如果自己写 Directive， Filter， Factory/Service/Provider 的时候，就必须去了解它的生命周期。我的 Github 账号上已经有好几个 AngluarJS 例子（包含 Authentication, CRUD ），针对不同技术输出后端 REST API，如 CakePHP，Ｚｅｎｄ２，Grails等。https://github.com/hantsy
yixiandave 写道w 写道这个对比Ember.js 怎么样？分别研究了一段时间Ember和Angular，最后我们采用了AngularAngular代码看起来更清晰简洁，使用也更方便Ember的Handlebars模板语言不是很习惯。最大的硬伤是判断逻辑居然不支持js表达式，除了提供的几种判断函数以外如果需要扩展只能自己往Handlebars加插件。还一个硬伤是不支持动画渐变的切换，虽然我找到了一个ember-animate的插件，但是最终也没弄明白应该怎么用而且Ember的MVC+Router的模式限制比较死，对开发者要求高，学习成本也比Angular高不少。就拿我自己来说，Ember.js我花了3天时间才大致写出来一个Demo而Angular我只用了一下午Angular确实是一个强大的前端框架，刚接触时感觉很惊艳，只用极少的代码就完成了平时写很多代码才实现的效果。不过比起Handlebars的模板语言，我更不喜欢html代码中间充斥着Angular的各种标记，没有深入的使用不敢妄评这种做法的好处与坏处，Angular的思想比较革命性，不是纯粹的MVC框架，入门容易，但深入学习，我个人暂时感觉很难融入。使用过backbone的同学应该更习惯EmberJs，Ember与backbone的思想更接近，并增强了不少，尤其是动态绑定(这个也是Angular的一大好处)，MVC框架的思想也有些接近苹果Cocoa的MVC,代码虽然多一些，但也更容易理解，有IOS开发经验的同学应该更容易接受。这两个框架都是目前来说最有前途的前端框架，看个人习惯选择了
w 写道这个对比Ember.js 怎么样？分别研究了一段时间Ember和Angular，最后我们采用了AngularAngular代码看起来更清晰简洁，使用也更方便Ember的Handlebars模板语言不是很习惯。最大的硬伤是判断逻辑居然不支持js表达式，除了提供的几种判断函数以外如果需要扩展只能自己往Handlebars加插件。还一个硬伤是不支持动画渐变的切换，虽然我找到了一个ember-animate的插件，但是最终也没弄明白应该怎么用而且Ember的MVC+Router的模式限制比较死，对开发者要求高，学习成本也比Angular高不少。就拿我自己来说，Ember.js我花了3天时间才大致写出来一个Demo而Angular我只用了一下午
学习中。测试驱动最吸引我。
w 写道这个对比Ember.js 怎么样？看这一篇&
这个对比Ember.js 怎么样？
相关资源推荐使用Jasmine和Karma对AngularJS页面程序进行测试
来源：易贤网&& 阅读：244 次&&日期： 14:54:33
温馨提示：易贤网小编为您整理了“使用Jasmine和Karma对AngularJS页面程序进行测试”,方便广大网友查阅！
这篇文章主要介绍了深入学习JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入门学习中的基础知识,需要的朋友可以参考下
AngularJS是继jQuery之后发生在JavaScript上最好的东西。这也是JavaScript开发一直以来想要的方式。Angular主要的优点之一就是它的依赖注入(Dependency Injection)，它非常利于代码的单元测试。但有点小怪异的是，我在无论如何都没能找到一个介绍如何做单元测试的教程。
当然有很多不错的推荐：使用Jasmine测试框架和Karma测试执行器（Test Runner）；但是并没有一篇完整的从无到有指导如何测试的教程。所以我写了这篇文章。我在网上找了很多资源才知道如何去做，而你现在不需要去做这些（如果一开始就看到这篇文章的话）。
请告诉我你看到的任何错误，直到我能说这是基于Karma和Jasmine测试Angular应用的最佳实践。
这篇文章会引导你安装使用Karma和Jasmine做自动化测试所需要的所有工具。我不在乎你实在使用TDD（测试驱动开发）还是TAD（测试辅助开发），在这篇文章中，我假设你已经有一个文件需要测试。
如果你没有安装 Node.js，那么请自行下载和安装。安装之后，打开终端或命令行输入一下命令：
npm install -g karma
文件结构是跟我们的议题关联不大，但是在接下来的测试中，我使用的文件结构如下：
Application
| angular.js
| angular-resource.js
&| home.js
&| home.tests.js
&| karma.config.js (will be created in the next step)
&| angular-mocks.js
*我并不主张这种文档结构，我展示它只是为了测试举例。
切换到你想要放置配置文件的目录，然后在终端中输入下面的命令来创建配置文件：
karma init karma.config.js
你会被询问一些问题，包括你想使用那个测试框架，你是否需要自动监测文件，包含哪些测试和被测试文件等。在我们的教程中，我们保留‘Jasmine'作为我们默认的框架，开启文件自动监测，并包含下面的文件：
../**.*.js
angular-mocks.js
**/*.tests.js
这些都是相对路径，包含了1）父目录下的所有.js文件,2）父目录下的所有子目录下的所有.js文件，3）当前目录下的angular-mock.js，4）以及当前目录（包含子目录）下所有的.tests.js文件（我喜欢以这样的方式来区分测试文件和其他的文件）。
不管你选择了什么文件，请确保你引入了 angular.js，angular-mock.js，以及其他你需要使用的文件。
现在已经可以启动Karma了，依然在终端中输入：
karma start karma.config.js
这个命令会在你的电脑上启动你在配置文件中列出的浏览器。这些浏览器都会以socket的方式连接到Karma的实例上，你会看到一组活动的浏览器并被告知她们是否在执行测试。我但愿Karma已经告诉你在每个浏览器上的最终测试结果总结（比如16个中的15个通过，1个失败），遗憾的是你只能通过终端窗口看到这些信息。
Karma的一个很突出的特色是你可以在网络中使用任何设备连接并测试你的代码。试一下将你的手机浏览器指向Karma服务，你可以在电脑上任何一个运行的浏览器上找到这个测试的URL地址。它应该类似于：http://localhost:9876/?id=5359192。你可以将你的手机，虚拟机，或其他任何设备的浏览器指向 [你在网络上的IP地址]:9876/?id=5359192. 因为Karma是在运行一个 Node.js 实例，你的测试机器就像一个web服务器一样，会将测试发送到任何指向它的浏览器。
基本的测试
我们假设你已经有一个文件需要测试。我们要使用到的 home.js 文件如下：
'use strict';
var app = angular.module('Application', ['ngResource']);
app.factory('UserFactory', function($resource){
&return $resource('Users/users.json')
app.controller('MainCtrl', function($scope, UserFactory) {
&$scope.text = 'Hello World!';
&$scope.users = UserFactory.get();
我们可以在 home.test.js 文件中创建我们的测试用例。我们从简单的那个测试开始：$scope.text 应该等于 ‘Hello World!'。 为了完成这个测试，我们需要模拟我们的 Application 模块以及 $scope 变量。我们会在Jasmine的 beforeEach 方法中做这个工作，这样的话我们在每个测试用例开始时可以有一个全新的（干净的）controler和scope对象。
home.tests.js
'use strict';
describe('MainCtrl', function(){
//我们会在测试中使用这个scope
//模拟我们的Application模块并注入我们自己的依赖
&beforeEach(angular.mock.module('Application'));
//模拟Controller，并且包含 $rootScope 和 $controller
&beforeEach(angular.mock.inject(function($rootScope, $controller){
//创建一个空的 scope
& scope = $rootScope.$new();
//声明 Controller并且注入已创建的空的 scope
& $controller('MainCtrl', {$scope: scope});
// 测试从这里开始
从代码中你可以看到我们注入了我们自己的 scope，因此我们可以在它的外部验证它的信息。同时，别忘了模拟模块本身（第7行代码）！我们现在已经为测试做好了准备：
home.tests.js
// 测试从这里开始
it('should have variable text = "Hello World!"', function(){
&expect(scope.text).toBe('Hello World!);
如果你运行这个测试，它可以在任何指向Karma的浏览器中执行，并且测试通过。
发送$resource请求
现在我们已经准备好测试 $resource 请求。要完成这个请求，我们需要使用到 $httpBackend， 它一个模拟版本的Angular $http。我们会创建另一个叫做 $httpBackend 的变量，在第二个 beforEach块中，注入 _$httpBackend_ 并将新创建的变量指向 _$httpBackend_。接下来我们会告诉 $httpBackend 如何对请求做出响应。
$httpBackend = _$httpBackend_;&
$httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
我们的测试： home.tests.js
it('should fetch list of users', function(){
& &$httpBackend.flush();
& &expect(scope.users.length).toBe(2);
& &expect(scope.users[0].name).toBe('Bob');
都放到一起
home.tests.js
'use strict';
describe('MainCtrl', function(){
&var scope, $httpB
//we'll use these in our tests
//mock Application to allow us to inject our own dependencies
&beforeEach(angular.mock.module('Application'));
//mock the controller for the same reason and include $rootScope and $controller
&beforeEach(angular.mock.inject(function($rootScope, $controller, _$httpBackend_){
& $httpBackend = _$httpBackend_;
& $httpBackend.when('GET', 'Users/users.json').respond([{id: 1, name: 'Bob'}, {id:2, name: 'Jane'}]);
//create an empty scope
& scope = $rootScope.$new();
//declare the controller and inject our empty scope
& $controller('MainCtrl', {$scope: scope});
// tests start here
&it('should have variable text = "Hello World!"', function(){
& expect(scope.text).toBe('Hello World!');
&it('should fetch list of users', function(){
& $httpBackend.flush();
& expect(scope.users.length).toBe(2);
& expect(scope.users[0].name).toBe('Bob');
Karma会运行所有文件中的所有测试用例，如果你只想运行所有测试的一个子集，修改 describe 或 it 为 ddescribe 或 iit 来运行个别的一些测试。如果有些测试你不想运行他们，那么修改 describe 或 it 为 xdescribe 或 xit 来忽略这些代码。
你也可以在html文件的页面上运行你的测试。举例的代码如下：
home.runner.html
&!DOCTYPE html&
&&title&Partner Settings Test Suite&/title&
&!-- include your script files (notice that the jasmine source files have been added to the project) --&
&&script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine.js"&&/script&
&&script type="text/javascript" src="../jasmine/jasmine-1.3.1/jasmine-html.js"&&/script&
&&script type="text/javascript" src="../angular-mocks.js"&&/script&
&&script type="text/javascript" src="home.tests.js"&&/script&
&&link rel="stylesheet" href="../jasmine/jasmine-1.3.1/jasmine.css"/&
&!-- use Jasmine to run and display test results --&
&&script type="text/javascript"&
& var jasmineEnv = jasmine.getEnv();
& jasmineEnv.addReporter(new jasmine.HtmlReporter());
& jasmineEnv.execute();
&&/script&
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款}