15 полезных инструментов AngularJS для разработчиков

Думаете о том, чтобы погрузить пальцы в Angular? Если вы прошли 10 лучших уроков по изучению поста AngularJS и хотели бы поиграть с Angular самостоятельно, вы на правильном посту. У нас есть некоторые инструменты, которые могут упростить ваш рабочий процесс разработки.

Мы смотрим на 15 из лучшие IDE, текстовые редакторы, инструменты для тестирования и отладки, модули а также средства разработки и приложения для строительства с Angular. Если у вас есть ваши любимые инструменты или приложения, поделитесь ими с нами в комментариях ниже.

IDE и текстовый редактор

В мире программирования существует два типа редакторов: полнофункциональная интегрированная среда разработки (IDE) и легкие текстовые редакторы. Оба позволяют ускорить рабочий процесс разработки. IDE и текстовый редактор, которые мы перечислили ниже, являются довольно хорошими инструментами для ускорения разработки на Angular. Они могут быть легко настроены для угловой среды.

WebStorm

WebStorm подходит не только для Javascript, но также для HTML и CSS. Он имеет потрясающий редактор в реальном времени, который позволяет просматривать результаты кодирования в браузере без необходимости частого обновления. По умолчанию их новейшая версия содержит пакет плагинов AngularJS, хотя сначала вам нужно будет включить скрипт Angular в ваш проект. Подробнее читайте в блоге WebStorm..

Aptana

Aptana - это бесплатная IDE с открытым исходным кодом, которая на самом деле представляет собой настроенную версию Eclipse, ориентированную на Javascript, HTML, CSS и другие веб-новинки. Чтобы расширить поддержку Aptana для Angular, все, что вам нужно сделать, это установить расширение AngularJS Eclipse из Eclipse Marketplace.

Возвышенный текст

Sublime Text - один из самых популярных текстовых редакторов, который нравится многим из-за его настраиваемости для адаптации к любой среде программирования. Он также быстрый, имеет настраиваемую поддержку фрагментов кода и имеет множество пакетов, включая пакет AngularJS, которые позволяют работать с Angular. Вот отличный пост от Дэна Уолина, вы можете проверить это.

Больше на возвышенном тексте:

• 18 основных плагинов Sublime Text
• 12 самых востребованных возвышенных текстовых советов и рекомендаций
• Как вставить путь к файлу в возвышенном тексте
• Быстрый предварительный просмотр проекта Localhost с Sublime Text
• Управление заметками и списками с возвышенным текстом
• Добавление префикса поставщика CSS с возвышенным текстом

Инструменты тестирования и отладки

Тестирование и отладка являются важными частями процесса разработки, особенно в такой среде, как Angular. Вот некоторые из инструментов, которые могут помочь вам протестировать и отладить ваше приложение.

Карма

Karma - отличный тестовый прогон, созданный для Angular, но он также может использоваться с любым другим фреймворком Javascript. Поддерживает любой тип тестирования: модульное тестирование, промежуточное тестирование а также E2E тестирование. Карма работает, открывая браузеры, которые вы перечислите в файле конфигурации. Затем он связывается с активным браузером с помощью socket.io и спрашивает вас, запускать тест или нет..

жасмин

Жасмин используется для разработки на основе поведения (BDD), но вы можете использовать его для разработки на основе тестирования (TDD) с небольшой настройкой. Обычно это сочетается с кармой: карма в качестве тестового бегуна, жасмин в качестве тестовой основы. Jasmine автоматически проверит все ваши классы и функции Javascript и сообщит вам о необработанном коде. Недостатком является он не знает, в какой среде (браузерах) был выполнен тест, но карма компенсирует этот недостаток.

MochaJS

По сравнению с Жасмин, MochaJS более гибкий но Жасмин поставляется в виде пакета «все в одном». С MochaJS, если вы хотите использовать шпионский фреймворк, вам нужно настроить Mocha с соответствующей библиотекой, такой как sinon.js. И если вам нужна платформа утверждений, Mocha должен быть настроен с такой структурой, как Chai.

Транспортир

Транспортир, наверное, самый мощный автоматизированный концы с концами (e2e) Инструмент для угловых испытаний. Protractor, разработанный командой Angular, объединяет в себе несколько великолепных технологий, доступных сегодня: NodeJS, Selenium, webDriver, мокко, огурец а также жасмин.

Угловой Батаранг

Кроме того Транспортир, Angular Batarang - еще один замечательный инструмент, разработанный командой Angular.. Batarang расширение Chrome для отладки приложений Angular После проверки вашего приложения, Batarang покажет вам модель, производительность и зависимость результаты отладки в трех разных вкладках. Вы также можете контролировать инспекцию, решая, показывать ли приложения, привязки или области.

нг-инспектор

ng-inspector - расширение для браузера, поддерживаемое в Chrome и Safari. В отличие от Batarang, который отображается в DevTools, ng-inspector предпочитает отображение на боковой панели. Вы можете просматривать и выделять элементы DOM при наведении курсора на область действия. Вы также можете увидеть объем и модель обновлены в режиме реального времени.

Модули

Лучшее место для поиска угловых модулей - ngmodules.org. Но если вам нужен краткий обзор, ниже приведен список некоторых полезных ресурсов, которые мы собрали для вас.

AngularUI

AngularUI - это набор компонентов пользовательского интерфейса, созданных с помощью AngularJS. Его служебные директивы помогут вам быстрее создавать приложения Angular. Вместо виджетов AngularUI использует необработанные директивы, такие как UI-маршрутизатор, щ-карта, UI-календарь и т.д. Директивы, которые вам, вероятно, понравятся больше всего, это его UI-Bootstrap, который может изначально создать Twitter Bootstrap в Angular. Проверьте его чистую и красивую страницу документации, чтобы начать.

ng-Table - таблица сортировки и фильтрации

Если вам нужны таблицы в вашем веб-приложении, которые можно сортировать и фильтровать, тогда ngTable - это инструмент, который вы ищете. Он также поддерживает переменную высоту строк и большие возможности разбивки на страницы.

Restangular

С Angular вам может быть трудно работать $ ресурсов а также $ HTTP для создания Rest API. Restangular может помочь сделать упрощает использование запросов на получение, удаление, обновление и публикацию данных. Некоторые функции, которые отличают Restangular от $ ресурсов поддержка HTTP-метода, самосвязывающийся элемент, использование обещаний и многое другое. Узнайте больше здесь и посмотрите живую демонстрацию на Plunkr.

Угловой Геттекст

Angular-Gettext - превосходный угловой модуль для супер-легкой локализации. Ключевые особенности: вы можете перевести свое веб-приложение так же просто, как добавить атрибут. Это позволяет вам сосредоточиться на разработке вашего приложения и оставить все переводы на Angular-Gettext.

Инструменты и приложения

Наконец, мы просто собираемся оставить это здесь. Это список других инструментов и приложений, которые могут сделать процесс разработки на Angular более простым и плавным. Они хорошо работают с теми, кто только начинает изучать Angular.

Генератор угловой

У Yeoman есть генератор кода, который называется Generator Angular. С помощью этого инструмента вы можете ускорить разработку Angular только парами терминальных команд. Он может автоматически генерировать сервер разработки, тестирование модулей и фреймворков, просмотр, директивы и многое другое.

ngDocs - AngularJS Reference

ngDocs - это приложение для Android, которое предоставляет документацию и справочные материалы по AngularJS, красивые и простые. Некоторые базовые учебники также доступны, если вы новичок в Angular. Есть дополнительные функции, такие как руководство разработчика и справочник по ошибкам, которые вы можете увидеть. С этим на вашем Android-устройстве выбирайте Angular, где бы вы ни находились.