August 16, 2016 at 06:4020+ My Favorite AngularJS Helpers
In this article, I decided to put together more than 20 AngularJS tools that have been making my AngularJS development process daily easier for several years now. When I switched from pure JavaScript to AngularJS, I wanted to keep abreast of all the new AngularJS innovations and for this I did research. It was very important for me to be on the right track. In my experience, when you know and use all the new products, the development of this JS framework is faster. After all this research for two years I managed to try the following tools. Here you will find tools for testing, front-end development, IDEs, text editors, libraries, modules, extensions, code generators, Grid tools and more.
Let's move on to the list.
In the beginning I would like to introduce you to three, in my opinion, the best AngularJS testing tools:
1. Karma
Karma is one of my favorite AngularJS testing tools. It provides an ideal testing environment, which allows you to test the application in real browsers and real devices such as phones and tablets.
2. Protractor
Protractor is an end-to-end test framework made based on WebDriverJS, which replaces the original AngularJS e2e tests. Runs tests in a real browser. It can be launched as a standalone binary or included in the tests as a library. Runs tests in a real browser, interacting with the application simulating the user.
3. Jasmine
Jasmine is a Behavior-Driven Development (Behavior-Driven Development) framework for testing JavaScript code. It can be successfully used to test JavaScript both on the client side and for Node.js.
4. Mocha.js
Mocha is a multifunctional framework that allows you to write tests and run them easily and simply. Generates reports in various versions, and also knows how to create documentation from tests.
Finish with the test frameworks and move on to the editors:
5. Sublime Text
Sublime Text is a great lightweight text editor that makes development easier than ever. Convenient user interface, rich features and excellent performance. The editor is shareware and costs $ 59 per license (if you take a lot at once - there is a discount), but you can use it for free.
6. CodePen
CodePen is a tool for front-end development, which allows you to easily operate with CSS / HTML / JS-constructs, allows you to connect js-libraries: jQuery, MooTools, etc. In it you can do previews and debugging, online.
7. JS Fiddle
JS Fiddle One of the most popular tools for working with JavaScript / HTML / CSS / SCSS. Simple, convenient, able to connect additional libraries. You can write and execute code using separate panels for JavaScript, CSS, HTML. You can use JS Fiddle to distribute snippets, code analysis, testing, real-time debugging.
Below we will look at three great IDEs for working with AngularJS:
8. Webstorm
Webstorm is a convenient and smart editor for JavaScript, Node.js, CSS & HTML ... as well as for all of their modern successors. It makes development easier and more convenient, providing highlighting and code completion, its analysis during editing, quick navigation and refactoring and providing the developer with powerful debugging tools and integration with version control systems. WebStorm detects possible problems even before you open the project in a browser and offers a solution to them. Built-in tools for testing and working with the project in the IDE will help in the development and make it more convenient and productive.
9. Aptana
Aptana is a free development environment created on the Eclipse platform. Supported operating systems: Linux, Windows and Mac OS X. A universal editor that allows you to work with HTML, CSS, JavaScript, PHP, as well as almost all JavaScript libraries and frameworks, including AngularJS.
10. Appery
Appery is a cloud-based service for creating mobile applications on Android, iOS and Windows Phone, including the open-source Apache Cordova (Phone Gap) framework with access to built-in components. Since this is a cloud service, nothing needs to be installed and downloaded, and getting started is simple. A drag-and-drop visual editor builds a user interface with jQuery Mobile, AngularJS, HTML5, and Bootstrap components.
AngularJS libraries:
11.AngularFire
With this tool you can easily create a backend for your Angular application. Includes a flexible API, provides data storage, authentication and static website hosting.
12. Angular UI Router
UI-Router library for organizing navigation between different parts of the application. The framework routing for AngularJS created by the AngularUI team. It provides a different approach than ngRoute and changes based on the state of the application, not just the route URL.
13. Angular Kickstart
Angular Kickstart is a tool that speeds up development on AngularJS and comes with a scalable build system, which in turn makes the development process easier.
AngularJS extensions:
14.NG-Inspector
ng-inspector is an extension for Chrome and Safari, it will add an inspector panel to help you develop, debug and understand your AngularJS applications. Provides a convenient overview of the scope structure.
15. Angular GetText
Angular GetText is a very simple translation support tool for AngularJS. You can simply enter the text in English, mark it for translation, and the tool will do the rest for you.
Other equally useful AngularJS tools:
16. Restangular
Restangular is a popular alternative to the REST API library built into Angular.js itself. It supports all HTTP methods and is devoid of various unpleasant bugs built into Angular.js library. Restangular is perfect for any web application that uses data from the RESTful API.
17. Yeoman
Yeoman is not just a scaffolder, but a whole set of tools that complement each other perfectly in the scaffold process and are harmoniously combined in the development process. Yeoman “stands on three pillars” that set the tone for the workflow: scaffolder Yo, Bower package manager and Grunt task manager. When you install Yo, you will also have Bower and Grunt installed, if they have not been installed previously.
18. Angular Seed
Angular Seed is an application skeleton for typical AngularJS web applications. Seed contains an example AngularJS application preconfigured to install AngularJS, as well as a huge number of development and testing tools.
19. Videogular
Videogular is an HTML5 video player based on AngularJS. The player is easy to configure and contains many additional options. It has an API and an extensible plugin system. It is also worth saying that Videogular is perfectly displayed on mobile devices.
20. Angular Deckgrid
Angular Deckgrid is a lightweight masonry-like modular grid for AngularJS, where the directive is independent of the visual representation. Angular Deckgrid uses a CSS file for the entire visual presentation.
21.Mean
Mean is a full-fledged bundle for development, which combines some of the best JavaScript technologies that allow you to quickly and easily go from the application development stage to the production stage. MEAN.js includes MongoDB, ExpressJS, AngularJS, and Node.js. It comes with pre-grouped and configured modules such as Mongoose and Passport.
22. LumX
The first responsive front-end framework based on AngularJS and Google Material Design specifications. Designed for developers and designers who work with mobile and cross-platform applications. It acts as a CSS Framework built with Sass, which includes a large number of built-in AngularJS components.
Regarding testing tools, I use Jasmine with Karma to test services and controllers. This helps me a lot in the fight against errors and typos, which saved me a lot of time.
All three editors presented are good, but in each I found a number of minuses, for example, JSfiddle works slower than Codepen, it is impossible to close or hide windows. In turn, Codepen does not show errors in JS, does not remember the layout of the page, live preview in other browsers only with a paid account.
AngularJS is a great, constantly evolving framework with a large community. I tried to describe all the modern tools that I use in working with it. But, today, they can be found a lot. So if you have something to add to the list, be sure to leave a comment with your AngularJS helper.
Let's move on to the list.
In the beginning I would like to introduce you to three, in my opinion, the best AngularJS testing tools:
1. Karma
Karma is one of my favorite AngularJS testing tools. It provides an ideal testing environment, which allows you to test the application in real browsers and real devices such as phones and tablets.
2. Protractor
Protractor is an end-to-end test framework made based on WebDriverJS, which replaces the original AngularJS e2e tests. Runs tests in a real browser. It can be launched as a standalone binary or included in the tests as a library. Runs tests in a real browser, interacting with the application simulating the user.
3. Jasmine
Jasmine is a Behavior-Driven Development (Behavior-Driven Development) framework for testing JavaScript code. It can be successfully used to test JavaScript both on the client side and for Node.js.
4. Mocha.js
Mocha is a multifunctional framework that allows you to write tests and run them easily and simply. Generates reports in various versions, and also knows how to create documentation from tests.
Finish with the test frameworks and move on to the editors:
5. Sublime Text
Sublime Text is a great lightweight text editor that makes development easier than ever. Convenient user interface, rich features and excellent performance. The editor is shareware and costs $ 59 per license (if you take a lot at once - there is a discount), but you can use it for free.
6. CodePen
CodePen is a tool for front-end development, which allows you to easily operate with CSS / HTML / JS-constructs, allows you to connect js-libraries: jQuery, MooTools, etc. In it you can do previews and debugging, online.
7. JS Fiddle
JS Fiddle One of the most popular tools for working with JavaScript / HTML / CSS / SCSS. Simple, convenient, able to connect additional libraries. You can write and execute code using separate panels for JavaScript, CSS, HTML. You can use JS Fiddle to distribute snippets, code analysis, testing, real-time debugging.
Below we will look at three great IDEs for working with AngularJS:
8. Webstorm
Webstorm is a convenient and smart editor for JavaScript, Node.js, CSS & HTML ... as well as for all of their modern successors. It makes development easier and more convenient, providing highlighting and code completion, its analysis during editing, quick navigation and refactoring and providing the developer with powerful debugging tools and integration with version control systems. WebStorm detects possible problems even before you open the project in a browser and offers a solution to them. Built-in tools for testing and working with the project in the IDE will help in the development and make it more convenient and productive.
9. Aptana
Aptana is a free development environment created on the Eclipse platform. Supported operating systems: Linux, Windows and Mac OS X. A universal editor that allows you to work with HTML, CSS, JavaScript, PHP, as well as almost all JavaScript libraries and frameworks, including AngularJS.
10. Appery
Appery is a cloud-based service for creating mobile applications on Android, iOS and Windows Phone, including the open-source Apache Cordova (Phone Gap) framework with access to built-in components. Since this is a cloud service, nothing needs to be installed and downloaded, and getting started is simple. A drag-and-drop visual editor builds a user interface with jQuery Mobile, AngularJS, HTML5, and Bootstrap components.
AngularJS libraries:
11.AngularFire
With this tool you can easily create a backend for your Angular application. Includes a flexible API, provides data storage, authentication and static website hosting.
12. Angular UI Router
UI-Router library for organizing navigation between different parts of the application. The framework routing for AngularJS created by the AngularUI team. It provides a different approach than ngRoute and changes based on the state of the application, not just the route URL.
13. Angular Kickstart
Angular Kickstart is a tool that speeds up development on AngularJS and comes with a scalable build system, which in turn makes the development process easier.
AngularJS extensions:
14.NG-Inspector
ng-inspector is an extension for Chrome and Safari, it will add an inspector panel to help you develop, debug and understand your AngularJS applications. Provides a convenient overview of the scope structure.
15. Angular GetText
Angular GetText is a very simple translation support tool for AngularJS. You can simply enter the text in English, mark it for translation, and the tool will do the rest for you.
Other equally useful AngularJS tools:
16. Restangular
Restangular is a popular alternative to the REST API library built into Angular.js itself. It supports all HTTP methods and is devoid of various unpleasant bugs built into Angular.js library. Restangular is perfect for any web application that uses data from the RESTful API.
17. Yeoman
Yeoman is not just a scaffolder, but a whole set of tools that complement each other perfectly in the scaffold process and are harmoniously combined in the development process. Yeoman “stands on three pillars” that set the tone for the workflow: scaffolder Yo, Bower package manager and Grunt task manager. When you install Yo, you will also have Bower and Grunt installed, if they have not been installed previously.
18. Angular Seed
Angular Seed is an application skeleton for typical AngularJS web applications. Seed contains an example AngularJS application preconfigured to install AngularJS, as well as a huge number of development and testing tools.
19. Videogular
Videogular is an HTML5 video player based on AngularJS. The player is easy to configure and contains many additional options. It has an API and an extensible plugin system. It is also worth saying that Videogular is perfectly displayed on mobile devices.
20. Angular Deckgrid
Angular Deckgrid is a lightweight masonry-like modular grid for AngularJS, where the directive is independent of the visual representation. Angular Deckgrid uses a CSS file for the entire visual presentation.
21.Mean
Mean is a full-fledged bundle for development, which combines some of the best JavaScript technologies that allow you to quickly and easily go from the application development stage to the production stage. MEAN.js includes MongoDB, ExpressJS, AngularJS, and Node.js. It comes with pre-grouped and configured modules such as Mongoose and Passport.
22. LumX
The first responsive front-end framework based on AngularJS and Google Material Design specifications. Designed for developers and designers who work with mobile and cross-platform applications. It acts as a CSS Framework built with Sass, which includes a large number of built-in AngularJS components.
Conclusion
Regarding testing tools, I use Jasmine with Karma to test services and controllers. This helps me a lot in the fight against errors and typos, which saved me a lot of time.
All three editors presented are good, but in each I found a number of minuses, for example, JSfiddle works slower than Codepen, it is impossible to close or hide windows. In turn, Codepen does not show errors in JS, does not remember the layout of the page, live preview in other browsers only with a paid account.
AngularJS is a great, constantly evolving framework with a large community. I tried to describe all the modern tools that I use in working with it. But, today, they can be found a lot. So if you have something to add to the list, be sure to leave a comment with your AngularJS helper.