15 Nyttige AngularJS-verktøy for utviklere

Tenker du på å dyppe tærne i Angular? Hvis du har gått gjennom våre 10 beste opplæringsprogrammer for å lære AngularJS-innlegg og ønsker å leke med Angular alene, er du på riktig innlegg. Vi har her noen verktøy som kan strømlinjeforme utviklingsarbeidet ditt.

Vi ser på 15 av beste IDEer, tekstredigerere, verktøy for testing og feilsøking, moduler og utviklingsverktøy og applikasjoner for bygging med kantet. Hvis du har favorittverktøy eller -appene dine, kan du dele dem med oss i kommentarene nedenfor.

IDE og tekstredigerer

I programmeringsverdenen er det to typer redaktører: fullverdig integrert utviklingsmiljø (IDE) og lettvektige tekstredaktører. Begge tillater raskere utviklings arbeidsflyt. IDE- og tekstredigeringsprogrammet som vi oppgir nedenfor, er ganske gode verktøy for å øke hastigheten på vinkelutviklingen. De kan enkelt konfigureres for vinkelmiljøet.

WebStorm

WebStorm passer ikke bare for Javascript, men også HTML og CSS. Den har en fantastisk live editor som lar deg se kodingsresultatene dine i nettleseren uten å trenge for mye forfriskning. Som standard bærer deres nyeste versjon AngularJS-pluginpakken, selv om du må inkludere Angular-skriptet i prosjektet først. For mer informasjon, les WebStorm blogginnlegg.

Aptana

Aptana er en gratis åpen kildekode IDE som faktisk er den egendefinerte versjonen av Eclipse som fokuserer på Javascript, HTML, CSS og andre webgods. For å utvide Aptana for vinkelstøtte, er alt du trenger å gjøre installert AngularJS Eclipse-utvidelsen fra Eclipse Marketplace.

Sublim tekst

En av de mest populære tekstredaktørene som er tilgjengelige, Sublime Text er elsket av mange på grunn av sin tilpassbarhet til å tilpasse seg alle slags programmeringsmiljø. Den er også rask og har tilpassbar kodestøtte, og har mange pakker, inkludert AngularJS-pakken som lar deg jobbe med Angular. Her er et flott innlegg av Dan Wahlin du kan sjekke ut om dette.

Mer om sublime tekst:

18 viktige Sublime Text plugins
12 Most Wanted Sublime Teksttips og triks
Slik legger du inn filbane i Sublime Text
Quick-preview Localhost-prosjekt med Sublime Text
Administrer notater og lister med sublime tekst
Legge til CSS Vendor Prefix med Sublime Text

Testing og feilsøking

Testing og feilsøking er viktige deler av utviklingsprosessen, spesielt i et miljø som Angular. Her er noen av verktøyene som kan hjelpe deg med å teste og feilsøke søknaden din.

Karma

Karma er en flott testløper laget for Angular, men kan også brukes med andre Javascript-rammer. Den støtter alle typer testing: enhetstesting, midtveisprøving og E2E testing. Karma fungerer ved å åpne nettlesere som du lister i konfigurasjonsfilen. Den kommuniserer deretter med den aktive nettleseren ved hjelp av socket.io og spør deg om du skal kjøre testen eller ikke.

Jasmine

Jasmine brukes til atferdsdrevet utvikling (BDD), men du kan bruke den til testdrevet utvikling (TDD) med litt tilpasning. Det er vanligvis kombinert med Karma: Karma som testløper, Jasmine som testramme. Jasmine vil automatisk inspisere alle JavaScript-klassene og -funksjonene og varsle deg om uhåndtert kode. Ulempen er det vet ikke hvilket miljø (nettlesere) testen utføres, men karma kompenserer for denne ulempen.

MochaJS

Sammenlignet med Jasmine, MochaJS er mer fleksibel men Jasmine kommer som en alt-i-ett-pakke. Med MochaJS, hvis du vil bruke spionrammer, må du sette opp Mokka med sitt eget bibliotek som sinon.js. Og hvis du trenger påstandsramme, må Mocha konfigureres med et rammeverk som Chai.

vinkelmåler

Protractor er trolig den mest kraftfulle automatiserte ende til ende (e2e) Vinkelprøveverktøy. Utviklet av Angular-teamet, er Protractor bygget ved å kombinere noen gode teknologier som er tilgjengelige i dag som NodeJS, Selen, WebDriver, Mokka, Agurk og Jasmine.

Vinkel Batarang

I tillegg vinkelmåler, Et annet flott verktøy utviklet av Angular teamet er Angular Batarang. batarang er en Chrome-utvidelse for feilsøkingsprogrammer. Etter å ha inspisert appen din, vil Batarang vise deg modell, ytelse og avhengighet feilsøking resulterer i tre forskjellige faner. Du kan også kontrollere inspeksjonen, bestemme om du vil vise applikasjoner, bindinger eller omfang.

ng-inspektør

ng-inspektør er en nettleserutvidelse som støttes på Chrome og Safari. I motsetning til Batarang som dukker opp i DevTools, foretrekker ng-inspektør sidepaneldisplayet i stedet. Du kan inspisere og markere DOM-elementer mens du svinger over et omfang. Du kan også se omfanget og modellen oppdatert i sanntid.

moduler

Det beste stedet å finne Angular moduler er ngmodules.org. Men hvis du trenger en rask oversikt, er nedenfor en liste over gode ressurser vi har samlet for deg.

AngularUI

AngularUI er en samling av UI komponenter bygget med AngularJS. Dens verktøy direktiver hjelper deg å bygge Angular applikasjoner raskere. I stedet for widgets bruker AngularUI rike direktiver som ui-ruter, ui-kartet, ui-kalender etc. Direktene du sannsynligvis vil mest, er dens UI-Bootstrap som kan innfødt opprett Twitter Bootstrap i Angular. Sjekk ut sin rene og fine dokumentasjonsside for å komme i gang.

ng-tabell - Sortering og filtrering Tabell

Hvis du trenger tabeller i webapplikasjonen din, den typen som kan sorteres og filtreres, er ngTable det verktøyet du leter etter. Den støtter også variabel rekkehøyder og gode paginasjonsegenskaper.

Restangular

Med kantet kan det hende du har det vanskelig å jobbe $ ressurs og $ http for å lage hvile-API. Restangulære kan bidra til å gjøre bruken av å få, slette, oppdatere og legge inn dataforespørsler enklere. Noen funksjoner som angir Restangular bortsett fra $ ressurs er HTTP-metodestøtte, selvkoblende element, lover bruk og mange flere. Finn ut mer her og sjekk live-demonstrasjonen på Plunkr.

Vinkel Gettext

Angular-Gettext er en fantastisk vinkelmodul for super lett lokalisering. Nøkkelegenskapene er at du kan oversette webappen din så enkelt som å legge til Egenskap. Det lar deg fokusere på apputviklingen din og la alle oversettelser gå til Angular-Gettext.

Verktøy og apper

Til slutt, vi skal bare forlate dette her. Det er en liste over flere verktøy og applikasjoner som sannsynligvis kan gjøre utviklingen i Angular enklere og jevnere. De jobber godt med de som bare begynner å plukke opp kantet.

Generator Vinkel

Yeoman har en kodegenerator kalt Generator Angular. Med dette verktøyet kan du øke hastigheten på vinkelutviklingen med bare par av terminalkommando. Den kan automatisk generere utviklingsserver, enhet og rammeprøving, visning, direktiver og mer.

ngDocs - AngularJS Reference

ngDocs er en Android-app som gir AngularJS dokumentasjon og referanser, hyggelig og enkelt. Enkelte grunnleggende opplæringsprogrammer er også tilgjengelige hvis du er ny til Angular. Det er flere funksjoner som en utviklerveiledning og feilreferanse som du kanskje vil se. Med dette på Android-enheten din, henter du på Angular uansett hvor du går.