推荐：20个有用的Angular.js工具

Posted 2021-04-26 iOS笔记

原文：20 Useful Angular.js Tools，参与译者：wancheng, Iam魔方, 叶秀兰, shirleywong, 成熟的毛毛虫

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

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

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

Angular.js开发最佳IDE

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

• Webstorm

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

• Aptana

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

• 文本编辑器 Sublime
  

对 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 应用都很有必要。

Generator Angular - 一个有用的工具

• Yeomen 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 项目。

希望这些对大家有所帮助，如果还有其他软件遗漏，可以在回复中补充。