В этой статье я решил собрать более чем 20 AngularJS инструментов, которые ежедневно облегчают мой процесс разработки на AngularJS вот уже на протяжении нескольких лет. Когда я перешел с чистого JavaScript на AngularJS, я хотел быть в курсе всех новинок AngularJS и для этого я сделал исследование. Для меня было очень важно быть на правильном пути. По моему опыту когда ты знаешь и пользуешься всеми новинками то освоение этого JS фреймворка идёт быстрее. После всего этого исследования на протяжении двух лет я успел попробовать следующие инструменты. Здесь вы найдете инструменты для тестирования, front-end разработки, IDE, текстовые редакторы, библиотеки, модули, расширения, генераторы кода, Grid-инструменты и другое.
Перейдем к списку.
В начале я бы хотел ознакомить вас с тремя, на мой взгляд, лучшими AngularJS инструментами для тестирования:
1. Karma
Karma один из моих любимых AngularJS инструментов для тестирования. Он обеспечивает идеальную среду для тестирования, что позволяет протестировать приложение в реальных браузерах и реальных устройствах, таких как телефоны и планшеты.
2. Protractor
Protractor это end-to-end тест-фреймворк сделанный на основе WebDriverJS, который приходит на смену первоначальным e2e тестам AngularJS. Запускает тесты в реальном браузере. Может быть запущен как самостоятельный бинарник либо включен в тесты как библиотека. Запускает тесты в реальном браузере, взаимодействуя с приложением имитируя пользователя.
3. Jasmine
Jasmine это BDD фреймворк (Behavior-Driven Development — Разработка на Основе Поведений) для тестирования JavaScript кода. Его можно успехом применять для тестирования JavaScript как на стороне клиента, так и для Node.js.
4. Mocha.js
Mocha это многофункциональный фреймворк позволяющий писать тесты и запускать их легко и просто. Генерирует отчеты в различных вариантах, а также умеет создавать документацию из тестов.
Закончим с тест-фреймворками и перейдем к редакторам:
5. Sublime Text
Sublime Text отличный легковесный текстовый редактор, который делает разработку проще, чем когда-либо. Удобный пользовательский интерфейс, широкие возможности и отличная производительность. Редактор условно-бесплатный и Стоит 59 $ за лицензию (если брать сразу много — есть скидка), но им можно пользоваться и бесплатно.
6. CodePen
CodePen инструмент для фронт-энд разработки, позволяющий легко оперировать с CSS/HTML/JS-конструкциями, позволяет подключать js-библиотеки: jQuery, MooTools и т.д. В нем вы можете делать предварительные просмотр и отладку, в онлайн режиме.
7. JS Fiddle
JS Fiddle Один из самых популярных инструментов для работы с JavaScript/HTML/CSS/SCSS. Прост, удобен, умеет подключать дополнительные библиотеки. Можно писать и выполнять код, используя отдельные панели для JavaScript, CSS, HTML. Вы можете использовать JS Fiddle для распространения снипетов, анализа кода, тестирования, отладки в режиме реального времени.
Ниже мы рассмотрим три отличных IDE для работы с AngularJS:
8. Webstorm
Webstorm удобный и умный редактор для JavaScript, Node.js, CSS & HTML… а также для всех их современных преемников. Делает разработку проще и удобней, обеспечивая подсветку и автодополнение кода, его анализ по ходу редактирования, быструю навигацию и рефакторинг и предоставляя разработчику мощные инструменты отладки и интеграцию с системами управления версиями. WebStorm обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение. Встроенные в IDE инструменты для тестирования и работы с проектом помогут в разработке и сделают ее удобней и продуктивней.
9. Aptana
Aptana бесплатная среда разработки, создана на платформе Eclipse. Поддерживаемые операционные системы: Linux, Windows и Mac OS X. Универсальный редактор, который позволяет работать с HTML, CSS, JavaScript, PHP, а также практически со всеми JavaScript- библиотеками и фреймворками, включая AngularJS.
10. Appery
Appery это облачный сервис по созданию мобильных приложений на Android, iOS и Windows Phone, включая open-source фреймворк Apache Cordova (Phone Gap) с доступом к встроенным компонентам. Так как это облачный сервис, ничего не нужно устанавливать и загружать, а начать работу просто. Визуальный редактор перетаскиванием компонентов строит пользовательский интерфейс с JQuery Mobile, AngularJS, HTML5 и компонентов Bootstrap.
AngularJS библиотеки:
11. AngularFire
С помощью этого инструмента вы можете легко создать бэкенд для вашего приложения на Angular. Включает в себя гибкое API, обеспечивает хранение данных, аутентификацию и статический хостинг веб-сайтов.
12. Angular UI Router
UI-Router библиотека для организации навигации между различными частями приложения. Маршрутизация фреймворка для AngularJS созданная AngularUI командой. Она обеспечивает иной подход, чем ngRoute и меняет основанное на состояние приложения, а не только URL маршрута.
13. Angular Kickstart
Angular Kickstart это инструмент который ускоряет разработку на AngularJS и поставляется с масштабируемой системой сборки, что в свою очередь делает процесс разработки проще.
AngularJS расширения:
14. NG-Inspector
ng-inspector – это расширение для Chrome и Safari, оно добавит панель инспектора, которая поможет вам в разработке, отладке и понимании ваших AngularJS приложений. Предоставляет удобный обзор структуры scope.
15. Angular GetText
Angular GetText — очень простой инструмент поддержки перевода для AngularJS. Вы можете просто ввести текст на английском языке, пометить его для перевода, а инструмент выполнит за вас все остальное.
Другие не менее полезные AngularJS инструменты:
16. Restangular
Restangular это популярная альтернатива встроенной в сам Angular.js библиотеки для работы с REST API. Она поддерживает все HTTP методы и лишена различных неприятных багов встроенной в Angular.js библиотеки. Restangular идеально подходит для любого web приложения, которое использует данные из RESTful API.
17. Yeoman
Yeoman – не просто скаффолдер, а целый набор инструментов, которые отлично дополняют друг друга в процессе скаффолдинга и гармонично сочетаются в процессе разработки. Yeoman «стоит на трёх китах», задающих тон рабочему процессу: скаффолдер Yo, менеджер пакетов Bower и менеджер задач Grunt. При установке Yo вам будут установлены также Bower и Grunt, если они не были установлены ранее.
18. Angular Seed
Angular Seed — это скелет приложения для типичных AngularJS веб-приложений. Seed содержит пример AngularJS приложения, предварительно сконфигурированный для установки AngularJS, а также огромное количество инструментов для разработки и тестирования.
19. Videogular
Videogular — это HTML5-видеоплеер, основанный на AngularJS. Плеер легко настраивается и содержит множество дополнительных опций. В нем есть API и расширяемая система плагинов. Стоит также сказать, что Videogular отлично отображается на мобильных устройствах.
20. Angular Deckgrid
Angular Deckgrid легкая masonry подобная модульная сетка для AngularJS, где директива не зависит от визуального представления. Angular Deckgrid использует файл CSS для всего визуального представления.
21. Mean
Mean это полноценная связка для разработки, которая объединяет одни из лучших технологий JavaScript, позволяющих быстро и просто перейти со стадии разработки приложения на стадию производства. В MEAN.js входят MongoDB, ExpressJS, AngularJS и Node.js. Он поставляется с предварительно сгруппированными и сконфигурированными модулями, такими как Mongoose и Passport.
22. LumX
Первый responsive front-end фреймворк на основе спецификаций AngularJS и Google Material Design. Рассчитан на разработчиков и дизайнеров, которые работают с мобильными и кросс-платформенными приложениями. Он выступает как CSS Framework построен с Sass, включающий в себя большое количество встроенных AngularJS компонентов.
Касательно инструментов для тестирования, я использую Jasmine вместе с Karma для тестирования сервисов и контроллеров. Это мне очень помогает в борьбе с ошибками и опечатками, что сэкономило немало времени.
Все три представленных редактора хороши, но в каждом я нашел ряд минусов, например, JSfiddle работает медленнее чем Codepen, невозможно закрыть или скрыть окна. В свою очередь Codepen не показывает ошибки в JS, не запоминает раскладку страницы, живой пред просмотр в других браузерах только с платным аккаунтом.
AngularJS — отличный, постоянно совершенствующийся фреймворк с большим комьюнити. Я постарался описать все современные инструменты которые использую в работе с ним. Но, на сегодняшний день, их можно найти очень много. Так что если вам есть чем дополнить список, обязательно оставьте комментарий со своим AngularJS помощником.
Перейдем к списку.
В начале я бы хотел ознакомить вас с тремя, на мой взгляд, лучшими AngularJS инструментами для тестирования:
1. Karma
Karma один из моих любимых AngularJS инструментов для тестирования. Он обеспечивает идеальную среду для тестирования, что позволяет протестировать приложение в реальных браузерах и реальных устройствах, таких как телефоны и планшеты.
2. Protractor
Protractor это end-to-end тест-фреймворк сделанный на основе WebDriverJS, который приходит на смену первоначальным e2e тестам AngularJS. Запускает тесты в реальном браузере. Может быть запущен как самостоятельный бинарник либо включен в тесты как библиотека. Запускает тесты в реальном браузере, взаимодействуя с приложением имитируя пользователя.
3. Jasmine
Jasmine это BDD фреймворк (Behavior-Driven Development — Разработка на Основе Поведений) для тестирования JavaScript кода. Его можно успехом применять для тестирования JavaScript как на стороне клиента, так и для Node.js.
4. Mocha.js
Mocha это многофункциональный фреймворк позволяющий писать тесты и запускать их легко и просто. Генерирует отчеты в различных вариантах, а также умеет создавать документацию из тестов.
Закончим с тест-фреймворками и перейдем к редакторам:
5. Sublime Text
Sublime Text отличный легковесный текстовый редактор, который делает разработку проще, чем когда-либо. Удобный пользовательский интерфейс, широкие возможности и отличная производительность. Редактор условно-бесплатный и Стоит 59 $ за лицензию (если брать сразу много — есть скидка), но им можно пользоваться и бесплатно.
6. CodePen
CodePen инструмент для фронт-энд разработки, позволяющий легко оперировать с CSS/HTML/JS-конструкциями, позволяет подключать js-библиотеки: jQuery, MooTools и т.д. В нем вы можете делать предварительные просмотр и отладку, в онлайн режиме.
7. JS Fiddle
JS Fiddle Один из самых популярных инструментов для работы с JavaScript/HTML/CSS/SCSS. Прост, удобен, умеет подключать дополнительные библиотеки. Можно писать и выполнять код, используя отдельные панели для JavaScript, CSS, HTML. Вы можете использовать JS Fiddle для распространения снипетов, анализа кода, тестирования, отладки в режиме реального времени.
Ниже мы рассмотрим три отличных IDE для работы с AngularJS:
8. Webstorm
Webstorm удобный и умный редактор для JavaScript, Node.js, CSS & HTML… а также для всех их современных преемников. Делает разработку проще и удобней, обеспечивая подсветку и автодополнение кода, его анализ по ходу редактирования, быструю навигацию и рефакторинг и предоставляя разработчику мощные инструменты отладки и интеграцию с системами управления версиями. WebStorm обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение. Встроенные в IDE инструменты для тестирования и работы с проектом помогут в разработке и сделают ее удобней и продуктивней.
9. Aptana
Aptana бесплатная среда разработки, создана на платформе Eclipse. Поддерживаемые операционные системы: Linux, Windows и Mac OS X. Универсальный редактор, который позволяет работать с HTML, CSS, JavaScript, PHP, а также практически со всеми JavaScript- библиотеками и фреймворками, включая AngularJS.
10. Appery
Appery это облачный сервис по созданию мобильных приложений на Android, iOS и Windows Phone, включая open-source фреймворк Apache Cordova (Phone Gap) с доступом к встроенным компонентам. Так как это облачный сервис, ничего не нужно устанавливать и загружать, а начать работу просто. Визуальный редактор перетаскиванием компонентов строит пользовательский интерфейс с JQuery Mobile, AngularJS, HTML5 и компонентов Bootstrap.
AngularJS библиотеки:
11. AngularFire
С помощью этого инструмента вы можете легко создать бэкенд для вашего приложения на Angular. Включает в себя гибкое API, обеспечивает хранение данных, аутентификацию и статический хостинг веб-сайтов.
12. Angular UI Router
UI-Router библиотека для организации навигации между различными частями приложения. Маршрутизация фреймворка для AngularJS созданная AngularUI командой. Она обеспечивает иной подход, чем ngRoute и меняет основанное на состояние приложения, а не только URL маршрута.
13. Angular Kickstart
Angular Kickstart это инструмент который ускоряет разработку на AngularJS и поставляется с масштабируемой системой сборки, что в свою очередь делает процесс разработки проще.
AngularJS расширения:
14. NG-Inspector
ng-inspector – это расширение для Chrome и Safari, оно добавит панель инспектора, которая поможет вам в разработке, отладке и понимании ваших AngularJS приложений. Предоставляет удобный обзор структуры scope.
15. Angular GetText
Angular GetText — очень простой инструмент поддержки перевода для AngularJS. Вы можете просто ввести текст на английском языке, пометить его для перевода, а инструмент выполнит за вас все остальное.
Другие не менее полезные AngularJS инструменты:
16. Restangular
Restangular это популярная альтернатива встроенной в сам Angular.js библиотеки для работы с REST API. Она поддерживает все HTTP методы и лишена различных неприятных багов встроенной в Angular.js библиотеки. Restangular идеально подходит для любого web приложения, которое использует данные из RESTful API.
17. Yeoman
Yeoman – не просто скаффолдер, а целый набор инструментов, которые отлично дополняют друг друга в процессе скаффолдинга и гармонично сочетаются в процессе разработки. Yeoman «стоит на трёх китах», задающих тон рабочему процессу: скаффолдер Yo, менеджер пакетов Bower и менеджер задач Grunt. При установке Yo вам будут установлены также Bower и Grunt, если они не были установлены ранее.
18. Angular Seed
Angular Seed — это скелет приложения для типичных AngularJS веб-приложений. Seed содержит пример AngularJS приложения, предварительно сконфигурированный для установки AngularJS, а также огромное количество инструментов для разработки и тестирования.
19. Videogular
Videogular — это HTML5-видеоплеер, основанный на AngularJS. Плеер легко настраивается и содержит множество дополнительных опций. В нем есть API и расширяемая система плагинов. Стоит также сказать, что Videogular отлично отображается на мобильных устройствах.
20. Angular Deckgrid
Angular Deckgrid легкая masonry подобная модульная сетка для AngularJS, где директива не зависит от визуального представления. Angular Deckgrid использует файл CSS для всего визуального представления.
21. Mean
Mean это полноценная связка для разработки, которая объединяет одни из лучших технологий JavaScript, позволяющих быстро и просто перейти со стадии разработки приложения на стадию производства. В MEAN.js входят MongoDB, ExpressJS, AngularJS и Node.js. Он поставляется с предварительно сгруппированными и сконфигурированными модулями, такими как Mongoose и Passport.
22. LumX
Первый responsive front-end фреймворк на основе спецификаций AngularJS и Google Material Design. Рассчитан на разработчиков и дизайнеров, которые работают с мобильными и кросс-платформенными приложениями. Он выступает как CSS Framework построен с Sass, включающий в себя большое количество встроенных AngularJS компонентов.
Заключение
Касательно инструментов для тестирования, я использую Jasmine вместе с Karma для тестирования сервисов и контроллеров. Это мне очень помогает в борьбе с ошибками и опечатками, что сэкономило немало времени.
Все три представленных редактора хороши, но в каждом я нашел ряд минусов, например, JSfiddle работает медленнее чем Codepen, невозможно закрыть или скрыть окна. В свою очередь Codepen не показывает ошибки в JS, не запоминает раскладку страницы, живой пред просмотр в других браузерах только с платным аккаунтом.
AngularJS — отличный, постоянно совершенствующийся фреймворк с большим комьюнити. Я постарался описать все современные инструменты которые использую в работе с ним. Но, на сегодняшний день, их можно найти очень много. Так что если вам есть чем дополнить список, обязательно оставьте комментарий со своим AngularJS помощником.
