20+ Моїх улюблених AngularJS помічників

У цій статті я вирішив зібрати більш ніж 20 AngularJS інструментів, які щодня полегшують мій процес розробки на AngularJS ось вже впродовж декількох років. Тут ви знайдете інструменти для тестування, front-end розробки, IDE, текстові редактори, бібліотеки, модулі, розширення, генератори коду, Grid-інструменти та інше.

Перейдемо до списку.

для початку я б хотів ознайомити вас з трьома, на мій погляд, кращими AngularJS інструментами для тестування:

1. Facebook

image

Karma один з моїх улюблених AngularJS інструментів для тестування. Він забезпечує ідеальне середовище для тестування, що дозволяє протестувати додаток до реальних браузерах і реальних пристроях, таких як телефони та планшети.

2. Protractor

image

Protractor це end-to-end тест-фреймворк зроблений на основі WebDriverJS, який приходить на зміну первісним e2e тестів AngularJS. Запускає тести в реальному браузері. Може бути запущений як самостійний бінарники або включений в тести як бібліотека. Запускає тести в реальному браузері, взаємодіючи з додатком імітуючи користувача.

3. Jasmine

image

Jasmine це BDD фреймворк (Behavior-Driven Development — Розробка на Основі Поводжень) для тестування JavaScript коду. Його можна успішно застосовувати для тестування JavaScript на стороні клієнта, так і для Node.js.

4. Mocha.js

image

Mocha це багатофункціональний фреймворк дозволяє писати тести і запускати їх легко і просто. Генерує звіти в різних варіантах, а також уміє створювати документацію із тестів.

Закінчимо з тест-фреймворками і перейдемо до редакторів:

5. Sublime Text

image

Sublime Text відмінний легкий текстовий редактор, який робить розробку простіше, ніж коли-небудь. Зручний користувальницький інтерфейс, широкі можливості і відмінна продуктивність. Редактор умовно-безкоштовний і Коштує 59 $ за ліцензію (якщо брати відразу багато — є знижка), але їм можна користуватися і безкоштовно.

6. CodePen

image

CodePen інструмент для фронт-енд розробки, що дозволяє легко оперувати з CSS/HTML/JS-конструкціями, дозволяє підключати js-бібліотеки: jQuery, MooTools і т. д. В ньому ви можете робити попередні перегляд та налагодження, в онлайн режимі.

7. JS скрипка некваліфікований робітник

image

JS скрипка некваліфікований робітник Один із найпопулярніших інструментів для роботи з JavaScript/HTML/CSS/SCSS. Простий, зручний, вміє підключати додаткові бібліотеки. Можна писати і виконувати код, використовуючи окремі панелі для JavaScript, CSS, HTML. Ви можете використовувати JS скрипка некваліфікований робітник для поширення снипетов, аналізу коду, тестування, налагодження в режимі реального часу.

Нижче ми розглянемо три відмінних IDE для роботи з AngularJS:

8. Webstorm

image

Webstorm зручний та розумний редактор JavaScript Node.js, CSS & HTML… а також для всіх сучасних наступників. Робить розробку простіше і зручніше, забезпечуючи підсвічування автодоповнення коду, його аналіз по ходу редагування, швидку навігацію і рефакторинг і надаючи розробнику потужні інструменти налагодження і інтеграцію з системами керування версіями. WebStorm виявляє можливі проблеми ще до того, як ви відкрили проект в браузері, і пропонує їх рішення. Вбудовані в IDE інструменти для тестування та роботи з проектом допоможуть у розробці і зроблять її зручніше і продуктивніше.

9. Aptana

image

Aptana безкоштовно середовище розробки, створена на платформі Eclipse. Підтримувані операційні системи: Linux, Windows і Mac OS X. Універсальний редактор, який дозволяє працювати з HTML, CSS, JavaScript, PHP, а також практично з усіма JavaScript — бібліотеками та фреймворками, включаючи AngularJS.

10. Appery

image

Appery це хмарний сервіс зі створення мобільних додатків на Android, iOS і Windows Phone, включаючи open-source фреймворк Apache Cordova (Phone Gap) з доступом до вбудованих компонентів. Так як це хмарний сервіс, нічого не потрібно встановлювати і завантажувати, а почати роботу просто. Візуальний редактор перетягуванням компонентів будує користувальницький інтерфейс з JQuery Mobile, AngularJS, HTML5 і компонентів Bootstrap.

AngularJS бібліотеки:

11. AngularFire

image

За допомогою цього інструменту ви можете легко створити бекенд для вашого застосування на Angular. Включає в себе гнучке API, забезпечує зберігання даних, аутентифікацію та статичний хостинг веб-сайтів.

12. Angular UI Router

image

UI-Router бібліотека для організації переходів між різними частинами програми. Маршрутизація фреймворку для AngularJS створена AngularUI командою. Вона забезпечує інший підхід, ніж ngRoute і змінює засноване на стан додатки, а не тільки URL маршруту.

13. Angular Kickstart

image

Angular Kickstart це інструмент, який прискорює розробку на AngularJS і поставляється з масштабованої системою складання, що в свою чергу робить процес розробки простіше.

AngularJS розширення:

14. NG-Inspector

image

ng-inspector – це розширення для Chrome і Safari, воно додасть панель інспектора, яка допоможе вам в розробці, налагодженні і розумінні ваших AngularJS додатків. Надає зручний огляд структури scope.

15. Angular GetText

image

Angular GetText — дуже простий інструмент підтримки перекладу для AngularJS. Ви можете просто ввести текст на англійській мові, позначити його для перекладу, а інструмент виконає за вас все інше.
Інші не менш корисні AngularJS інструменти:

16. Restangular

image

Restangular це популярна альтернатива вбудованої в сам Angular.js бібліотеки для роботи з REST API. Вона підтримує всі HTTP методи і позбавлена різних неприємних багів вбудованої в Angular.js бібліотеки. Restangular ідеально підходить для будь-якого веб-застосунку, який використовує дані з RESTful API.

17. Yeoman

image

Yeoman – не просто скаффолдер, а цілий набір інструментів, які відмінно доповнюють один одного у процесі скаффолдинга і гармонійно поєднуються в процесі розробки. Yeoman «стоїть на трьох китах», які задають тон робочого процесу: скаффолдер Yo, менеджер пакетів Bower і менеджер завдань Grunt. При установці Yo вам будуть встановлені також Bower і Grunt, якщо вони не були встановлені раніше.

18. Angular Seed

image

Angular Seed — це скелет програми для типових AngularJS веб-додатків. Seed містить приклад AngularJS програми, попередньо сконфігурований для установки AngularJS, а також величезна кількість інструментів для розробки і тестування.

19. Videogular

image

Videogular — це HTML5-відеоплеєр, заснований на AngularJS. Плеєр легко настроюється і містить безліч додаткових опцій. У ньому є API і розширювана система плагінів. Варто також сказати, що Videogular відмінно відображається на мобільних пристроях.

20. Angular Deckgrid

image

Angular Deckgrid легка masonry подібна модульна сітка для AngularJS, де директива не залежить від візуального представлення. Angular Deckgrid використовує файл CSS для всього візуального представлення.

21. Mean

image

Mean це повноцінна зв'язка для розробки, яка об'єднує одні з кращих технологій JavaScript, що дозволяють швидко і просто перейти зі стадії розробки додатка на стадію виробництва. В MEAN.js входять MongoDB, ExpressJS, AngularJS і Node.js. Він поставляється з попередньо згрупованими і сконфігурованими модулями, такими як Mongoose і Passport.

22. LumX

image

Перший responsive front-end фреймворк на основі специфікацій AngularJS і Google Material Design. Розрахований на розробників і дизайнерів, які працюють з мобільними і крос-платформеними додатками. Він виступає як CSS Framework побудований з Sass, що включає в себе велику кількість вбудованих AngularJS компонентів.

Висновок
Щодо інструментів для тестування, я використовую Jasmine разом з Karma для тестування сервісів і контролерів. Це мені дуже допомагає в боротьбі з помилками, що принесло чимало часу.

Всі три представлені редактора гарні, але в кожному я знайшов ряд мінусів, наприклад, JSfiddle працює повільніше, ніж Codepen, неможливо закрити або приховати вікна. У свою чергу Codepen не показує помилки в JS, не запам'ятовує розкладку сторінки, живий перед перегляд в інших браузерах тільки з платним аккаунтом.

AngularJS — відмінний, постійно совершенствующийся фреймворк з великим ком'юніті. Я постарався описати всі сучасні інструменти, які використовую в роботі з ним. Але, на сьогоднішній день, їх можна знайти дуже багато. Так що якщо вам є чим доповнити список, обов'язково залиште коментар зі своєю AngularJS помічником.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.