手记

20 个有用的 Angular.js 工具

喜欢 Angular.js我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。

对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一个可以选择的框架。angularjs 开发者如果想开始一个 AngularJS 工程,为了采取成熟的方式开发网页,他们或许需要很多工具。

在开始使用 angular.js 之前,Angular.js 新手或许也想读一些优秀的 angular.js 书籍。我们同样也编写了一份庞大的在线 angular.js 教程清单

为了减轻使用 AngularJS 开发 web 应用的负担,这里列出了几个出色的工具,包括测试、前端开发、编辑、函数库、扩展、模块、代码生成器、网格工具。


Angular.js 开发最佳 IDE

Angular.js 需要的大部分集成开发环境(IDE)和轻量级的编辑器列在了下面:

Webstorm

Webstorm是一个出色的代码编辑器,它完全理解工程,可以为任何类型的网站提供高质量的代码。它支持所有最流行最新的网站开发技术。使用这个工具开发网站,可以很好地集成单点或流程。

Aptana

Aptana 是一具集成开发环境,可以帮助你优雅地创建网站应用。使用它做为 AngularJS 的集成开发工具,你需要在 Eclipse 商店激活 AngularJS Eclipse 扩展。


文本编辑器

Sublime Text

对 AngularJS Web 开发者来说,方便的文本编辑工具是 Sublime。它帮助程序员使用快捷方式或几个按键实现编码。它具有很强的适应性,可以定制任何类型的编程环境。它也可以按照你的意愿分块编辑。它还可以轻松地在项目之间切换,所有的修改都将自动保存在各自的项目中。


Angular.js 的专用测试工具

测试是开发的重要组成部分,无论对于使用 Angular.js 还是任何其他软件都是如此。下面的工具可以帮助你简化采用 Angular.js 开发的应用程序的测试。

这些工具都是在线 JavaScript 测试工具的好伴侣。

Protractor

Protractor 是一个端到端的测试框架,贯穿于 AngularJS,是一个完全自动化的测试工具。它可以运行在真实的浏览器中测试你的应用程序。它使用了 WebDriver,Mocha, jasmine, Node.js, selenium 和cucumber 等都使用的伟大的技术。

当所有的待处理网页任务完成时,它会自动使用AngularJS的应用进行通信。所以,你在测试时不需要使用等待或睡眠命令。

Jasmine

Jasmine 是一个行为驱动开发框架,专为 Javascript 用户创建。它提供了基本的测试框架,并且可以持续维护。所有测试都可以使用一个 all-in-one 的包完成,这是 Jasmine 的主要特点,高效测试你的应用。

这个框架的一个缺点是它不能感知运行平台(浏览器)。如果配合Karma使用这个问题很容易避免。

Karma 可以做为测试运行者配合 Jasmine 使用。它是一个测试框架帮且你高效地测试应用。

Code Orchestra

它是一个绝对意义上的前端开发工具帮助你创建和测试网站应用。你可以实时写代码,根据建议修改代码,以同样的格式保存代码。通过这个工具修改后的代码会自动布署到运行中的应用。


最好的 Angular.js 函数库

下面是一些有用的库,它们可以增强 angular.js 框架的能力,对开发者有所帮助。没有必要从头构建那些可能已经成为开放源码的函数库。

CodePen

对于所有 HTML,CSS 和 JavaScript 的前端开发者,CodePen 是一款完美的编辑工具。这个工具可以最大限度地减少对网站的创建、测试和完善的繁琐的网页开发工作。它是一个协作的在线编程环境。

Web 开发人员可以清晰地跨平台实时查看。它有一个浏览器中的代码编辑器,可以自动地迅速地上传多个文件。这个功能可协助 Web 开发人员在几秒的时间内创建一个新的代码。

Angular Fire

使用 Angular Fire,可以轻松地帮助你开发 AngularJS 的应用后台。AngularJS 绑定的 Firebase 已经正式被 Angular Fire 支持。Firebase 是一个基于云计算的平台,可以很容易地集成实时应用和快速创建后台。

当 Firebase 和 Angular Fire 组合在一起,它们有助于以更快的速度同步数据和提供良好的用户管理服务。它还提供了一个三向的数据绑定、用户身份验证和静态托管。

AngularUI

AngularJS 以高效率创建单页面应用而出名. 创建这些单页面应用时候,我们需要一个灵活的路由,这个优秀的 AngularJS 框架是构建一个全面的 UI 组件俗称 ui-router。 它能根据应用程序的状态提供一个简单的导航和改变视图,而不仅仅是基于 URL。

AngularUI 还包含非常多的 UI 组件,这些组件是使用原生指令像 ui—maps,ui-calendar,ui-Bootstrap 创建的。这些UI组件和指令可以更快建设 Angular 网站。

UI Bootstrap

UI Bootstrap 是一个不同寻常的 AngularUI 组件,它能帮助你创建基于智能手机的 web 应用程序,而且用户体验不错。这个 UI 组件提供的 AngularJS 原生指令完全兼容 Twitte Bootstrap。


Angular.js 有用的扩展和工具

下面是一些 Angular.js 扩展,可以满足一些特殊应用之需。

Ng-Inspector

Ng-Inspector 是一个优秀的浏览器插件,支持 Firefox,Chrome 和 Safari,复用它可以创建一个探测控制面板,方便开发,调试 AngularJS 应用,它提供了完整的辅助功能。

使用它可以更方便的和你的应用交互,还可以实时更新。它还可以看到全部范围内的层次结构,模型,类型和值。点击你关注的一个范围,它会高亮显示相应的 DOM 结点。

AngularJS Batarang

你可以使用 AngularJS Batarang 来调试你的 AngularJ S应用,它是一个专为 Chrome 提供的插件。它帮助你改善应用性能。还可能衡量调节性能的进度。

Restangular

AngularJS 独有的一个服务是 Restangular,它可以帮助您轻松应对各种要求,例如获取、发送、删除以及把数据存入数据库。它对于所有从 RESTful API 中大规模存取数据的 AngularJS 应用都很有必要。

Yeoman Generator

你可以很容易地开始一个具有合理的默认值和最好的用例的项目。建立这样的 Angular 应用,这款 Yeomen generator 工具是非常有用的。它只需几条终端的命令,便加速了 AngularJS 应用的开发过程。这个工具是非常有用的。这些专用的生成工具将有助于应用了解项目的有关信息,并有助于开发和测试应用程序。

Angular Deckgrid

Angular Deckgrid 可以为你提供响应度和颜值俱高的应用,可以适配不同的移动终端。轻量级类砖石结构易于创建灵活的表格,高效创建图片展示。

Radian

Radian 是一个优秀的框架,使用它只需要少量的设置就可以开启 AngularJS 项目。在多人开发项目中它是一个理想的选择。

Lumx

Lumx 以快速简单的方式帮助你创建简单而优雅的应用。 这个可响应式前端框架是基于AngularJS 和Google 材料设计规范。这个工具可嵌入最新的技术,如 Sass 预处理器,AngularJS 和 JQuery,能极大地提高 web 应用的性能。

Angular Gettext

你可以用英语编码,在编码需要被翻译的地方加上注解。Angular Gettext 工具就会自动翻译那些独立的部分。这是 AngularJS 非常简单而强大的翻译支持工具。

NgDocs

AngularJS 框架内置 ngDocs 工具可以简化你项目文档和参考手册的相关工作。这款基于 Android 的工具也能提供给所有新手一些容易跟进的教程。

NgTables

无论是简单还是复杂的 Web 应用,在 AngularJS 框架中很容易创建一个表格,然后通过实用的 ngTables 工具进行高效的管理。ngTable 是 AngularJS 表格指令,支持排序,过滤和分页,在编译步骤中自动生成带有标题和过滤器的标题行。

ngTable 支持定制过滤选项,表格分组,表格外部数据控制 等等功能。

总的来说,这些都是创建任意 AngularJS Web 应用的,最有用的工具集合。用好这些工具可以帮助你轻松高效的创建 AngularJS 项目。

希望这些对大家有所帮助,如果还有其他软件遗漏,可以在评论中补充:)

英文原文:20 Useful Angular.js Tools
译文源自:http://www.oschina.net/translate/useful-angularjs-tools?p=2#comments

相关文章

1.25个超有用的 AngularJS Web 开发工具

2.Angular.js 的一些学习资源

3.6个强大的AngularJS扩展应用

相关课程

慕课网AngularJS系列课程——大漠穷秋

1.使用AngularJS开发下一代Web应用

2.AngularJS实战

16人推荐
随时随地看视频
慕课网APP

热门评论

This is a very useful article for developers. Perhaps those tools that you have described are really the most useful among the existing ones. I translated the text using google translator. But I would very much like to have an English version of the site :)

Manager of CPIMobi store optimization service

Marla Widal

谢谢c

查看全部评论