20+ My favorite AngularJS helpers
In this article, I decided to build more than 20 AngularJS tools that make my AngularJS development process easier every day for the past several years. When I switched from pure JavaScript to AngularJS, I wanted to keep abreast of all the new AngularJS products 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 innovations, then mastering 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, IDE, text editors, libraries, modules, extensions, code generators, grid tools and more.
Let's go to the list.
In the beginning, I would like to acquaint you with 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 based on WebDriverJS, which replaces the initial AngularJS e2e tests. Run tests in a real browser. It can be run as a standalone binary or included in tests as a library. Run tests in a real browser, interacting with the application simulating the user.
3. Jasmine
Jasmine is a BDD framework (Behavior-Driven Development - Behavior Development) 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 feature-rich framework that allows you to write tests and run them easily and simply. Generates reports in various variants, and also is able to create documentation from tests.
Finish with the test frameworks and move on to the editors:
5. Sublime Text
Sublime Text is an excellent lightweight text editor that makes development easier than ever. Convenient user interface, great 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 front-end development tool that 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 debugs, 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 for distributing snippet, code analysis, testing, debugging in real time.
Below we will look at three excellent IDEs for working with AngularJS:
8. Webstorm
Webstorm is a handy and smart editor for JavaScript, Node.js, CSS & HTML ... and also for all 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 the browser, and proposes their solution. Built-in IDE tools for testing and working with the project will help in the development and make it more convenient and more productive.
9. Aptana
Aptana is a free development environment, created on the Eclipse platform. Supported operating systems: Linux, Windows and Mac OS X. Universal editor that allows you to work with HTML, CSS, JavaScript, PHP, as well as with 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 embedded components. Since this is a cloud service, you do not need to install and download anything, and it’s easy to get started. The drag and drop visual editor builds the 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. It 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. AngularJS framework routing created by the AngularUI team. It provides a different approach than ngRoute and changes based on the state of the application, not just the URL of the route.
13. Angular Kickstart
Angular Kickstart is a tool that speeds 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 that will 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 nasty bugs of the library built in Angular.js. Restangular is ideal 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 perfectly complement each other in the scaffolding process and harmoniously blend in the development process. Yeoman "stands on three pillars" that set the tone for the workflow: the Yo scaffolder, the Bower package manager, and the Grunt task manager. When installing Yo, you will also have Bower and Grunt installed if they have not been installed before.
18. Angular Seed
Angular Seed is a skeleton application for typical AngularJS web applications. Seed contains an example of an AngularJS application, pre-configured to install AngularJS, as well as a huge number of development and testing tools.
19. Videogular
Videogular is an HTML5 based 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 does not depend on the visual presentation. Angular Deckgrid uses a CSS file for the entire visual presentation.
21. Mean
Mean is a complete development bundle that combines some of the best JavaScript technologies that allow you to quickly and easily move from the application development stage to the production stage. MEAN.js includes MongoDB, ExpressJS, AngularJS and Node.js. It comes with pre-clustered and configured modules, such as Mongoose and Passport.
22. LumX
The first responsive front-end framework based on the specifications of AngularJS and Google Material Design. 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 embedded AngularJS components.
Regarding testing tools, I use Jasmine with Karma to test services and controllers. This helps me a lot in dealing with errors and typos, which saved a lot of time.
All three editors are good, but in each I found a number of drawbacks, for example, JSfiddle is 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 him. But, today, they can be found very much. So if you have something to add to the list, be sure to leave a comment with your AngularJS assistant.
Let's go to the list.
In the beginning, I would like to acquaint you with 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 based on WebDriverJS, which replaces the initial AngularJS e2e tests. Run tests in a real browser. It can be run as a standalone binary or included in tests as a library. Run tests in a real browser, interacting with the application simulating the user.
3. Jasmine
Jasmine is a BDD framework (Behavior-Driven Development - Behavior Development) 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 feature-rich framework that allows you to write tests and run them easily and simply. Generates reports in various variants, and also is able to create documentation from tests.
Finish with the test frameworks and move on to the editors:
5. Sublime Text
Sublime Text is an excellent lightweight text editor that makes development easier than ever. Convenient user interface, great 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 front-end development tool that 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 debugs, 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 for distributing snippet, code analysis, testing, debugging in real time.
Below we will look at three excellent IDEs for working with AngularJS:
8. Webstorm
Webstorm is a handy and smart editor for JavaScript, Node.js, CSS & HTML ... and also for all 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 the browser, and proposes their solution. Built-in IDE tools for testing and working with the project will help in the development and make it more convenient and more productive.
9. Aptana
Aptana is a free development environment, created on the Eclipse platform. Supported operating systems: Linux, Windows and Mac OS X. Universal editor that allows you to work with HTML, CSS, JavaScript, PHP, as well as with 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 embedded components. Since this is a cloud service, you do not need to install and download anything, and it’s easy to get started. The drag and drop visual editor builds the 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. It 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. AngularJS framework routing created by the AngularUI team. It provides a different approach than ngRoute and changes based on the state of the application, not just the URL of the route.
13. Angular Kickstart
Angular Kickstart is a tool that speeds 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 that will 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 nasty bugs of the library built in Angular.js. Restangular is ideal 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 perfectly complement each other in the scaffolding process and harmoniously blend in the development process. Yeoman "stands on three pillars" that set the tone for the workflow: the Yo scaffolder, the Bower package manager, and the Grunt task manager. When installing Yo, you will also have Bower and Grunt installed if they have not been installed before.
18. Angular Seed
Angular Seed is a skeleton application for typical AngularJS web applications. Seed contains an example of an AngularJS application, pre-configured to install AngularJS, as well as a huge number of development and testing tools.
19. Videogular
Videogular is an HTML5 based 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 does not depend on the visual presentation. Angular Deckgrid uses a CSS file for the entire visual presentation.
21. Mean
Mean is a complete development bundle that combines some of the best JavaScript technologies that allow you to quickly and easily move from the application development stage to the production stage. MEAN.js includes MongoDB, ExpressJS, AngularJS and Node.js. It comes with pre-clustered and configured modules, such as Mongoose and Passport.
22. LumX
The first responsive front-end framework based on the specifications of AngularJS and Google Material Design. 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 embedded AngularJS components.
Conclusion
Regarding testing tools, I use Jasmine with Karma to test services and controllers. This helps me a lot in dealing with errors and typos, which saved a lot of time.
All three editors are good, but in each I found a number of drawbacks, for example, JSfiddle is 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 him. But, today, they can be found very much. So if you have something to add to the list, be sure to leave a comment with your AngularJS assistant.
Source: https://habr.com/ru/post/307826/
All Articles