Some Useful AngularJS Tools For Developers

IDE & Text Editor

In the programming world, there are two types of editors: full featured Integrated Development Environment (IDE) and lightweight text editors. Both allow for faster development workflow. The IDE and text editor we listed below are pretty good tools to speed up your Angular development. They can be easily configured for the Angular environment.

WebStorm

WebStorm is suited not just for Javascript but also HTML and CSS. It has an awesome live editor which lets you see your coding results on the browser without frequent refreshing needed. By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first.

Aptana

Aptana is a free open source IDE which is actually the customized version of Eclipse focusing on Javascript, HTML, CSS and other web goodies. To extend Aptana for Angular support, all you need to do is install the AngularJS Eclipse extension from the Eclipse Marketplace.

Sublime Text

One of the most popular text editors available, Sublime Text is loved by many because of its customizability to adapt to any kind of programming environment. It is also fast and has customizable code snippet support, and has many packages including the AngularJS package which allow you to work with Angular. Here is a great post by Dan Wahlin you can check out about this.

Testing & Debugging Tools

Testing and debugging are important parts of the development process especially in an environment like Angular. Here are some of the tools that can help you test and debug your application.

Karma

Karma is a great test runner made for Angular, but can also be used with any other Javascript framework. It supports any type of testing: unit testing, midway testing and E2E testing. Karma works by opening browsers that you list in the configuration file. It then communicates with the active browser using socket.io and asks you whether to run the test or not.

Jasmine

Jasmine is used for behavior-driven development (BDD), but you can use it for test-driven development (TDD) with a bit customization. It is usually coupled with Karma: Karma as the test runner, Jasmine as the test framework. Jasmine will automatically inspect all your Javascript classes and functions and notify you of unhandled code. The drawback is it doesn’t know which environment (browsers) the test performed, but Karma compensates for this disadvantage.

MochaJS

When compared to Jasmine, MochaJS is more flexible but Jasmine comes as an all-in-one package. With MochaJS, if you want to use spy framework, you need to set up Mocha with its appropriate library like sinon.js. And if you need assertion framework, Mocha needs to be configured with a framework like Chai.

Protractor

Protractor is probably the most powerful automated end to end (e2e) Angular testing tool. Developed by the Angular team, Protractor is built by combining some great technologies available today like NodeJS, Selenium, webDriver, Mocha, Cucumber and Jasmine.

Angular Batarang

Besides Protractor, another great tool developed by the Angular team is Angular Batarang. Batarang is a Chrome extension for debugging Angular applications. After inspecting your app, Batarang will show you the model, performance and dependency debugging results in three different tabs. You can also control the inspection, deciding whether to show the applications, bindings or scopes.

ng-inspector

ng-inspector is a browser extension supported on Chrome and Safari. Unlike Batarang which shows up in DevTools, ng-inspector prefers the side panel display instead. You can inspect and highlight DOM elements as you hover over a scope. You can also see the scope and model updated in real time.

Modules

The best place to find Angular modules is ngmodules.org. But if you need a quick overview, below is a list of some good resources we’ve collected for you.

AngularUI

AngularUI is a collection of UI components built with AngularJS. Its utility directives help you build Angular applications faster. Instead of widgets, AngularUI uses raw directives like ui-router, ui-map, ui-calendar etc. The directives you’ll probably like the most is its UI-Bootstrap which can natively create Twitter Bootstrap in Angular.

Generator Angular

Yeoman has a code generator called Generator Angular. With this tool, you can speed up your Angular development with only couples of terminal command. It can automatically generate development server, unit and framework testing, view, directives and more.

ngDocs – AngularJS Reference

ngDocs is an Android app that provides AngularJS documentation and references, nice and simple. Some basic tutorials are also available if you are new to Angular. There are additional features like a developer guide and error reference that you may like to see. With this on your Android device, pick up on Angular wherever you go.