These days, AngularJS is one of the most popular technologies around the web. It has simplified web application development to a great extent. Currently, it is a popular name buzzing in the community of developers and technology enthusiasts. With AngularJS, one can build a variety of web applications and websites. You can also look upon “Free Ebooks to learn AngularJS” to start development in this technology.
AngularJS applications can also be integrated in to an existing system or project. It is a powerful front-end framework for designing rich user interfaces (UIs). Some of the popular AngularJS applications include Ghost (a blogging platform), Goodfilms mobile site (a movie review site) and CVsIntellect (a resume maker app).
Alright, in case you are an AngularJS application developer then you will definitely need assistance from tools on your project. So, here, I have come up with this extensive list of 21 useful AngularJS tools that will prove useful in your Angular app development journey. The list features a variety of code editors, testing tools, extensions and more. Read on.
AngularJS Frameworks
1) Ionic
Ionic is an open-source, front-end framework for developing mobile applications with HTML, CSS and JavaScript. You require Angular JS to get powerful features, such as UI interaction, gestures and animations. Moreover, you can generate animation and transition system as well as splash screens and icons for your applications. Mallzee and Chef Steps are the popular apps built using Ionic.
2) Supersonic
Supersonic is a front-end framework for developing data-driven hybrid apps and cool user interfaces for mobile devices. Apart from a bunch of CSS components, you can natively implement UI components, such as navigation bar, tab bar, drawers, cards, grid systems and more in Supersonic.
3) LumX
Lumx is a responsive front-end framework based on AngularJS and Google Material Design guidelines. It is a powerful JavaScript MVC Framework to build one-page applications with ease and pace. You can integrate smooth animations, date picker, notifications, drop downs, text fields, scroll bar and such other features using LumX.
Radian is an Angular JS framework ideal for working on multiple development projects. With Radian, you can split an Angular JS application in to manageable, decoupled components allowing a great level of abstraction and modularity to your codes. It is based on AMD structure (Asynchronous Module Definitions) and also allows testing your apps.
Mobile Angular UI is a front-end framework for building HTML5 mobile application with Bootstrap 3 and Angular JS. The framework offers a bunch of Bootstrap 3 mobile components, such as switches, overlays, sidebars, navbars and more. Some of the popular apps built using Mobile Angular UI are Hotelier News and Good Doctor.
Also See: 15 Directives to Extend Your Angular.js Apps
AngularJS Code Editors
6) Sublime Text
Sublime Text is a cross-platform, text editor for code, mark up and prose. It offers custom options for key bindings, code completion, snippets, macros and more. With Sublime Text, you can change indentation settings, choose multiple selections while editing, change syntax and do a lot more.
7) CodePen
CodePen is an HTML, CSS and JavaScript code editor for front-end web development. It offers features, such as code preview, debugging, real-time code editing and collaboration.
8) JS Fiddle
JS Fiddle is an online code editing tool. You can write and execute codes using separate panels for JavaScript, CSS, HTML and output. You can use JS Fiddle for sharing snippets, reviewing code, testing, debugging, real-time collaborating and more.
Also See: Top 10 Tools for Examining the UX of Your Website Design
AngularJS IDEs
9) WebStorm
Webstorm is a popular JavaScript integrated development environment (IDE) to allow client/server side development with Node.js. The tool has a code editor supporting Compass, AngularJS, HTML, CSS and more. It performs a range of functions, such as error detection, refactoring and code completion.
10) Aptana
Aptana is an open-source, web application integrated development environment (IDE). The tool lets you build, test, edit, preview and debug HTML, CSS and JavaScript codes. It is cloud-based and fully customizable.
11) Appery
Appery is a cloud-based platform for developing mobile and responsive applications using public/private cloud options. One can build various iOS, HTML5 and Android apps. This integrated development environment (IDE) offers visual editors with simple drag-drop features to build rich user interfaces with jQuery Mobile, Angular JS, HTML5 and Bootstrap components.
Also Check: Learn an Easy Way to Create a Multilingual Angularjs App
AngularJS Testing Tools
12) Protractor
Protractor is a Node.js testing framework for AngularJS applications. In Protractor, a browser is controlled using the JSON Webdriver Wire Protocol, which performs actions like finding and interacting with DOM elements in an asynchronous manner. Hence, it allows running tests against an application running in a real browser just like a user would natively do.
13) Mocha
Mocha is a JavaScript framework for Node.js and the browser. It supports both behavior-driven and test-driven development styles. Mocha makes testing asynchronous code convenient and supports usage of any assertion library. Mocha offers defining features, such as
- Meta-generating suites and test cases,
- Mapping uncaught exceptions to the correct test case
- Extensible Reporting
- Test-specific timeouts
- Node debugger support
Code Orchestra is a development tool for testing and building mobile/web applications. It works as a program that allows writing code in real-time. As you edit code and hit save, the modifications are delivered to the working application. It works with popular web technologies like AngularJS and supports any IDEs.
Also See: 12 Web Application Frameworks for Node.js
AngularJS Extensions
15) ng-inspector
ng-inspector offers an inspection control pane to develop and debug AngularJS applications. It is a browser extension for Chrome, Safari and Firefox. The extension is useful for DOM highlighting, viewing scope hierarchy, seeing scope’s models and more, all updated in real-time.
16) angular-gettext
Angular-gettext is a translation tool for AngularJS applications. It supports more than 130 different languages.
Eclipse is an integrated development environment (IDE) for Java developers. But, it is easily extensible using various plugins to support various programming languages, like JavaScript, Python and Ruby. Angular JS Eclipse Plugin extends Eclipse WTP (web tools platform) to provide an HTML editor supporting AngularJS expression and directive, Angular Explorer view and a JavaScript editor.
Also Read: Top 12 Tools for Creating Animations with HTML5
AngularJS Libraries
18) Angular Fire
Angular Fire is the AngularJS binding for wiring up Firebase backend with AngularJS applications. Firebase is a web application development framework offering Angular Fire, an open-source library for AngularJS. Firebase SDK and Angular Fire offers three-way data binding, fast data synchronization, built-in authentication and user management service, free hosting and more.
19) Polymer
Polymer is a library to extend HTML’s vocabulary. It offers a declarative syntax which makes defining custom elements simple. Additionally, it provides features, such as templating, two-way data binding and property observation. Thus, it helps in building reusable elements for web technologies with less code.
20) UI Bootstrap
Twitter Bootstrap is a popular HTML, CSS and JS framework for developing web apps for mobile devices. UI Bootstrap leverages the power of Twitter Bootstrap by offering a set of native Angular JS directives based on Bootstrap’s markup and CSS components. Some of them include Accordion, Alert, Carousel, Collapse, Timepicker, Dropdown and many more.
Angular UI Router is a native library for Angular JS directives. It works as a routing framework for Angular JS, splitting an interface in to a state machine. Its defining feature is its ability to nest states and views.
Conclusion:
I am sure that I have got everything covered. But, let me tell you that there are a lot of AngularJS tools, extensions and test runners that are currently in use. In case you happen to know any other AngularJS tools other than mentioned on the list, then you can share their names in the comments box below.
You should mention Yeoman, while not specifically an AngularJS tool, the Angular Generator will save you a lot of effort.
Atom is an awesome alternative to Sublime, and works really well with this stack. Plugins aplenty and an active community has made it my weapon of choice!
To monitor angular performance while developing this extension could be useful: https://github.com/Linkurious/angular-performance
I am curious why Google’s Angular Material is not listed and discussed here?
Online Docs – https://material.angularjs.org
Open Source – https://github.com/angular/material
as long as i know angular material is under ionic team not google
No mention of Angular Material?
I would definitely mention Angular Material project: https://material.angularjs.org/latest/#/
Guys there are doing an awesome stuff.
ngRoute > UI router
i think this is also usefull for “on the fly” forms
http://vitalets.github.io/angular-xeditable/
A new one coming up is Brightwork (brightwork.io). Full disclosure, I’m a Founder.