15 Przydatne narzędzia AngularJS dla programistów

Myślisz o zanurzeniu palców w Angular? Jeśli przeszedłeś przez nasze 10 najlepszych samouczków, aby nauczyć się postu AngularJS i chciałbyś sam bawić się z Angularem, jesteś na odpowiednim poście. Mamy tu trochę narzędzia, które mogą usprawnić proces tworzenia aplikacji.

Patrzymy na 15 z najlepsze środowiska IDE, edytory tekstu, narzędzia do testowania i debugowania, moduły i narzędzia i aplikacje programistyczne do budowy z Angular. Jeśli masz swoje ulubione narzędzia lub aplikacje, podziel się nimi z nami w komentarzach poniżej.

Edytor IDE i tekstu

W świecie programowania istnieją dwa typy edytorów: w pełni funkcjonalne zintegrowane środowisko programistyczne (IDE) i lekkie edytory tekstu. Oba pozwalają na szybszy przepływ prac rozwojowych. IDE i edytor tekstu, które wymieniliśmy poniżej, są całkiem dobrymi narzędziami do przyspieszenia rozwoju Angular. Można je łatwo skonfigurować dla środowiska Angular.

WebStorm

WebStorm nadaje się nie tylko do obsługi Javascript, ale także HTML i CSS. Posiada niesamowity edytor na żywo, który pozwala zobaczyć wyniki kodowania w przeglądarce bez częstego odświeżania. Domyślnie ich najnowsza wersja zawiera pakiet wtyczek AngularJS, chociaż najpierw musisz dołączyć skrypt Angular do projektu. Aby uzyskać więcej informacji, przeczytaj post na blogu WebStorm.

Aptana

Aptana to darmowy open source IDE, który jest w rzeczywistości dostosowaną wersją Eclipse skupiającą się na Javascript, HTML, CSS i innych gadżetach internetowych. Aby rozszerzyć obsługę Aptana for Angular, wszystko, co musisz zrobić, to zainstalować rozszerzenie AngularJS Eclipse z Eclipse Marketplace.

Wysublimowany tekst

Jeden z najpopularniejszych edytorów tekstu, Sublime Text jest uwielbiany przez wielu ze względu na możliwość dostosowania go do dowolnego środowiska programistycznego. Jest również szybki i ma konfigurowalne wsparcie dla fragmentów kodu oraz wiele pakietów, w tym pakiet AngularJS, który umożliwia pracę z Angular. Oto świetny post Dana Wahlina, który możesz sprawdzić na ten temat.

Więcej na temat Sublime Text:

18 niezbędnych wtyczek Sublime Text
12 wskazówek i sztuczek Most-Wanted Sublime Text
Jak wstawić Ścieżkę pliku w Sublime Text
Szybki podgląd projektu Localhost z Sublime Text
Zarządzaj notatkami i listami za pomocą wysublimowanego tekstu
Dodawanie prefiksu dostawcy CSS z tekstem Sublime

Narzędzia do testowania i debugowania

Testowanie i debugowanie są ważnymi elementami procesu rozwoju, szczególnie w środowisku takim jak Angular. Oto niektóre narzędzia, które mogą pomóc w testowaniu i debugowaniu aplikacji.

Karma

Karma to świetny tester stworzony dla Angular, ale może być również używany z dowolną inną strukturą JavaScript. Obsługuje każdy rodzaj testowania: testy jednostkowe, testy pośrednie i Testy E2E. Karma działa poprzez otwieranie przeglądarek wyświetlanych w pliku konfiguracyjnym. Następnie komunikuje się z aktywną przeglądarką za pomocą socket.io i pyta, czy uruchomić test, czy nie.

Jaśmin

Jasmine jest wykorzystywany do rozwoju opartego na zachowaniu (BDD), ale można go używać do programowania sterowanego testami (TDD) z niewielkim dostosowaniem. Zazwyczaj jest to połączone z Karma: Karma jako biegacz testowy, Jasmine jako framework testowy. Jasmine automatycznie sprawdzi wszystkie klasy i funkcje Javascript i powiadomi Cię o nieobsługiwanym kodzie. Wadą jest nie wie, które środowisko (przeglądarki) wykonał test, ale Karma kompensuje tę wadę.

MochaJS

W porównaniu do Jasmine, MochaJS jest bardziej elastyczny ale Jasmine to kompletny pakiet. Z MochaJS, jeśli chcesz korzystać ze struktury szpiegowskiej, musisz skonfigurować Mocha z odpowiednią biblioteką, taką jak sinon.js. A jeśli potrzebujesz struktury asercji, Mocha musi być skonfigurowany w taki sposób, jak Chai.

Kątomierz

Kątomierz jest prawdopodobnie najbardziej wydajny zautomatyzowany koniec końców (e2e) Narzędzie do testowania kątowego. Kątomierz, opracowany przez zespół Angular, jest zbudowany dzięki połączeniu kilku znakomitych technologii dostępnych obecnie NodeJS, Selenium, webDriver, Mocha, Cucumber i Jaśmin.

Kątowy Batarang

Oprócz Kątomierz, kolejnym świetnym narzędziem opracowanym przez zespół Angular jest Angular Batarang. Batarang to rozszerzenie Chrome do debugowania aplikacji Angular. Po sprawdzeniu aplikacji Batarang pokaże Ci model, wydajność i zależność wyniki debugowania w trzech różnych zakładkach. Możesz również kontrolować inspekcję, decydując, czy pokazać aplikacje, powiązania lub zakresy.

ng-inspektor

ng-inspector to rozszerzenie przeglądarki obsługiwane w Chrome i Safari. W przeciwieństwie do Batarang, który pojawia się w DevTools, ng-inspector woli zamiast tego panel boczny. Możesz przeglądać i podświetlać elementy DOM po najechaniu na zakres. Możesz również zobaczyć zakres i model zaktualizowany w czasie rzeczywistym.

Moduły

Najlepszym miejscem na znalezienie modułów Angular jest ngmodules.org. Ale jeśli potrzebujesz szybkiego przeglądu, poniżej znajduje się lista dobrych zasobów, które zebraliśmy dla Ciebie.

AngularUI

AngularUI to zbiór komponentów interfejsu użytkownika zbudowanych w AngularJS. Jego dyrektywy dotyczące narzędzi pomagają w szybszym budowaniu aplikacji Angular. Zamiast widżetów, AngularUI używa takich dyrektyw jak router ui, mapa ui, kalendarz ui itp. Dyrektywy, które prawdopodobnie spodobają Ci się najbardziej, to pasek startowy UI, który może być natywny utwórz Twitter Bootstrap w Angular. Aby rozpocząć, sprawdź czystą i ładną stronę z dokumentacją.

ng-Table - Tabela sortowania i filtrowania

Jeśli potrzebujesz tabel w swojej aplikacji internetowej, rodzaju, który można sortować i filtrować, to ngTable jest narzędziem, którego szukasz. Obsługuje również zmienne wysokości rzędów i duże możliwości podziału na strony.

Prostokątny

Dzięki Angular możesz mieć problemy z pracą $ zasób i $ http do tworzenia API odpoczynku. Restangular może pomóc łatwiejsze pobieranie, usuwanie, aktualizowanie i wysyłanie żądań danych. Niektóre funkcje, które ustawiają Restangular poza $ zasób są wsparciem dla metody HTTP, elementem samo-linkującym, obiecującym użyciem i wieloma innymi. Dowiedz się więcej tutaj i sprawdź demo na żywo na Plunkr.

Angular Gettext

Angular-Gettext to znakomity moduł kątowy do super łatwej lokalizacji. Najważniejsze funkcje to przetłumaczenie aplikacji internetowej tak łatwo, jak dodanie atrybut. Pozwala skupić się na rozwoju aplikacji i pozostawić wszystkie tłumaczenia w Angular-Gettext.

Narzędzia i aplikacje

Na koniec zostawimy to tutaj. To lista dodatkowych narzędzi i aplikacji, które mogą sprawić, że Twój proces rozwoju Angular będzie łatwiejszy i płynniejszy. Działają dobrze z tymi, którzy dopiero zaczynają podnosić Angular.

Generator kątowy

Yeoman ma generator kodu o nazwie Generator Angular. Dzięki temu narzędziu możesz przyspieszyć swój rozwój kątowy tylko za pomocą par poleceń terminalu. Może automatycznie generować serwer deweloperski, testy jednostek i ram, widok, dyrektywy i inne.

ngDocs - AngularJS Reference

ngDocs to aplikacja na Androida, która zapewnia dokumentację i odniesienia AngularJS, ładne i proste. Niektóre podstawowe samouczki są również dostępne, jeśli jesteś nowy w Angular. Istnieją dodatkowe funkcje, takie jak przewodnik dla programistów i odnośnik do błędów, które możesz chcieć zobaczyć. Dzięki temu na urządzeniu z Androidem możesz wybrać Angular, gdziekolwiek jesteś.