Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with Angular on your own, you’re on the right post. We have here some tools that can streamline your development workflow.
We’re looking at 15 of the best IDEs, text editors, tools for testing & debugging, modules and development tools and apps for building with Angular. If you have your favorite tools or apps, do share them with us in the comments below.
Getting Started With AngularJS
Every once in a while a new tool arises and just as it suddenly appeared, it seeps down... Read more
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.
By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. For more details, read the WebStorm blog post.
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.
More on Sublime Text:
- 18 essential Sublime Text plugins
- 12 Most-Wanted Sublime Text tips & tricks
- How to insert File Path in Sublime Text
- Quick-preview Localhost project with Sublime Text
- Manage Notes and Lists with Sublime Text
- Adding CSS Vendor Prefix with Sublime Text
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 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 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.
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 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.
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 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.
A quick search on Github Angular Topic should find you a plenty of Angular module developed by the community. But if you need a quick overview, below is a list of some good resources we’ve collected for you.
Angular Material is a collection of UI components based on the very own Google Material design language. Built by the team from Google and Angular, the collection comprises of each and every component from Material Design such as the Form Controls, Navigation, the Layout as well as its utility tools.
If you’re looking a complete package of UI framework with Angular, look no further.
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-calendar etc. The directives you’ll probably like the most is its UI-Bootstrap which can natively create Twitter Bootstrap in Angular. Check out its clean and nice documentation page to get started.
With Angular, you may have a hard time working working
$http for creating Rest API. Restangular can help make the usage of get, delete, update and post data requests easier.
Angular-Gettext is a superb Angular module for super-easy localization. The key features are you can translate your web app as easy as adding
attribute. It lets you focus on your app development and leave all translations to Angular-Gettext.
Tools & Apps
Lastly, we’re just going to leave this here. It’s a list of more tools and apps that can probably make your Angular development process easier and smoother. They work well with those who are just starting to pick up 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.
AwesomeAngular is a comprehensive list of anything Angular. You can find list of books, cheatsheets, source of learning, tutorials, components and Angular exports to follow in Twitter.