20+ Meine bevorzugten AngularJS-Helfer

In diesem Artikel habe ich mich entschlossen, mehr als 20 AngularJS-Tools zusammenzustellen, die meinen Entwicklungsprozess für AngularJS seit einigen Jahren täglich vereinfachen. Als ich von reinem JavaScript auf AngularJS umstieg, wollte ich über alle neuen AngularJS-Innovationen auf dem Laufenden bleiben und habe dafür recherchiert. Es war mir sehr wichtig, auf dem richtigen Weg zu sein. Nach meiner Erfahrung ist die Entwicklung dieses JS-Frameworks schneller, wenn Sie alle neuen Produkte kennen und verwenden. Nach zweijähriger Recherche habe ich die folgenden Tools ausprobiert. Hier finden Sie Tools zum Testen, für die Front-End-Entwicklung, für IDEs, Texteditoren, Bibliotheken, Module, Erweiterungen, Codegeneratoren, Grid-Tools und mehr.

Kommen wir zur Liste.

Zu Beginn möchte ich Ihnen die drei meiner Meinung nach besten AngularJS-Testtools vorstellen:

1. Karma

Bild

Karma ist eines meiner Lieblings-AngularJS-Testtools. Es bietet eine ideale Testumgebung, mit der Sie die Anwendung in echten Browsern und echten Geräten wie Telefonen und Tablets testen können.

2. Winkelmesser

Bild

Winkelmesser ist ein End-to-End-Test-Framework, das auf WebDriverJS basiert und die anfänglichen AngularJS e2e-Tests ersetzt. Führt Tests in einem echten Browser aus. Es kann als eigenständige Binärdatei gestartet oder als Bibliothek in die Tests einbezogen werden. Führt Tests in einem realen Browser durch und interagiert mit der Anwendung, die den Benutzer simuliert.

3. Jasmin

Bild

Jasmine ist ein Framework für behaviourgesteuerte Entwicklung (Behaviour-Driven Development) zum Testen von JavaScript-Code. Es kann erfolgreich verwendet werden, um JavaScript sowohl auf der Clientseite als auch für Node.js zu testen.

4. Mocha.js

Bild

Mocha ist ein multifunktionales Framework, mit dem Sie Tests schreiben und einfach und problemlos ausführen können. Generiert Berichte in verschiedenen Versionen und weiß, wie aus Tests eine Dokumentation erstellt wird.

Beenden Sie den Test mit den Frameworks und gehen Sie zu den Editoren:

5. Erhabener Text

Bild

Sublime Text ist ein großartiger, leichter Texteditor, der die Entwicklung so einfach wie nie zuvor macht. Praktische Benutzeroberfläche, umfangreiche Funktionen und hervorragende Leistung. Der Editor ist Shareware und kostet 59 US-Dollar pro Lizenz (wenn Sie eine Menge sofort in Anspruch nehmen, gibt es einen Rabatt), aber Sie können ihn kostenlos nutzen.

6. CodePen

Bild

CodePen ist ein Tool für die Front-End-Entwicklung, mit dem Sie auf einfache Weise mit CSS / HTML / JS-Konstrukten arbeiten und js-Bibliotheken verbinden können: jQuery, MooTools usw. Darin können Sie eine Vorschau und ein Debugging online durchführen.

7. JS Fiddle

Bild

JS Fiddle Eines der beliebtesten Tools für die Arbeit mit JavaScript / HTML / CSS / SCSS. Einfach, bequem und in der Lage, zusätzliche Bibliotheken anzuschließen. Sie können Code mit separaten Bedienfeldern für JavaScript, CSS und HTML schreiben und ausführen. Mit JS Fiddle können Sie Snippets verteilen, Code analysieren, testen und in Echtzeit debuggen.

Im Folgenden werden drei großartige IDEs für die Arbeit mit AngularJS vorgestellt:

8. Webstorm

Bild

Webstorm ist ein praktischer und intelligenter Editor für JavaScript, Node.js, CSS und HTML sowie für alle modernen Nachfolger. Es macht die Entwicklung einfacher und bequemer und bietet Hervorhebungen und die Vervollständigung des Codes, die Analyse während der Bearbeitung, die schnelle Navigation und das Refactoring sowie leistungsstarke Debugging-Tools und die Integration in Versionskontrollsysteme. WebStorm erkennt mögliche Probleme, noch bevor Sie das Projekt in einem Browser öffnen, und bietet eine Lösung an. Die in die IDE integrierten Tools zum Testen und Arbeiten mit dem Projekt helfen bei der Entwicklung und machen es bequemer und produktiver.

9. Aptana

Bild

Aptana ist eine kostenlose Entwicklungsumgebung, die auf der Eclipse-Plattform erstellt wurde. Unterstützte Betriebssysteme: Linux, Windows und Mac OS X. Ein universeller Editor, mit dem Sie mit HTML, CSS, JavaScript, PHP sowie nahezu allen JavaScript-Bibliotheken und Frameworks, einschließlich AngularJS, arbeiten können.

10. Appery

Bild

Appery ist ein Cloud-basierter Dienst zum Erstellen mobiler Anwendungen auf Android, iOS und Windows Phone, einschließlich des Open-Source-Frameworks Apache Cordova (Phone Gap) mit Zugriff auf integrierte Komponenten. Da es sich um einen Cloud-Dienst handelt, müssen Sie nichts installieren und herunterladen. Die ersten Schritte sind jedoch einfach. Ein visueller Drag & Drop-Editor erstellt eine Benutzeroberfläche mit jQuery Mobile-, AngularJS-, HTML5- und Bootstrap-Komponenten.

AngularJS-Bibliotheken:

11.AngularFire

Bild

Mit diesem Tool können Sie ganz einfach ein Backend für Ihre Angular-Anwendung erstellen. Enthält eine flexible API, bietet Datenspeicherung, Authentifizierung und statisches Website-Hosting.

12. Angular UI Router

Bild

UI-Router-Bibliothek zum Organisieren der Navigation zwischen verschiedenen Teilen der Anwendung. Das vom AngularUI-Team erstellte Framework-Routing für AngularJS. Es bietet einen anderen Ansatz als ngRoute und ändert sich basierend auf dem Status der Anwendung, nicht nur der Routen-URL.

13. Angular Kickstart

Bild

Angular Kickstart ist ein Tool, das die Entwicklung in AngularJS beschleunigt und mit einem skalierbaren Build-System ausgestattet ist, das den Entwicklungsprozess vereinfacht.

AngularJS-Erweiterungen:

14.NG-Inspector

Bild

ng-inspector ist eine Erweiterung für Chrome und Safari. Es wird ein Inspektorfenster hinzugefügt, mit dem Sie AngularJS-Anwendungen entwickeln, debuggen und verstehen können. Bietet einen praktischen Überblick über die Bereichsstruktur.

15. Angular GetText

Bild

Angular GetText ist ein sehr einfaches Tool zur Unterstützung von Übersetzungen für AngularJS. Sie können den Text einfach in Englisch eingeben, zur Übersetzung markieren und das Tool erledigt den Rest für Sie.
Andere ebenso nützliche AngularJS-Tools:

16. Restangular

Bild

Restangular ist eine beliebte Alternative zur in Angular.js selbst integrierten REST-API-Bibliothek. Es unterstützt alle HTTP-Methoden und enthält keine unangenehmen Fehler in der Angular.js-Bibliothek. Restangular ist ideal für jede Webanwendung, die Daten aus der RESTful-API verwendet.

17. Yeoman

Bild

Yeoman ist nicht nur ein Gerüstbauer, sondern eine ganze Reihe von Werkzeugen, die sich im Gerüstprozess perfekt ergänzen und im Entwicklungsprozess harmonisch kombiniert werden. Yeoman „steht auf drei Säulen“, die den Workflow bestimmen: Scaffolder Yo, Bower Package Manager und Grunt Task Manager. Bei der Installation von Yo werden auch Bower und Grunt installiert, sofern sie noch nicht installiert wurden.

18. Angular Seed

Bild

Angular Seed ist ein Anwendungsskelett für typische AngularJS-Webanwendungen. Seed enthält eine AngularJS-Beispielanwendung, die für die Installation von AngularJS vorkonfiguriert ist, sowie eine Vielzahl von Entwicklungs- und Testtools.

19. Videogular

Bild

Videogular ist ein HTML5-Videoplayer, der auf AngularJS basiert. Der Player ist einfach zu konfigurieren und enthält viele zusätzliche Optionen. Es hat eine API und ein erweiterbares Pluginsystem. Es ist auch erwähnenswert, dass Videogular auf mobilen Geräten perfekt angezeigt wird.

20. Angular Deckgrid

Bild

Angular Deckgrid ist ein leichtes, mauerwerkartiges modulares Gitter für AngularJS, bei dem die Richtlinie von der visuellen Darstellung unabhängig ist. Angular Deckgrid verwendet eine CSS-Datei für die gesamte visuelle Präsentation.

21.Mean

Bild

Mean ist ein umfassendes Paket für die Entwicklung, das einige der besten JavaScript-Technologien kombiniert, mit denen Sie schnell und einfach von der Anwendungsentwicklung bis zur Produktionsphase wechseln können. MEAN.js umfasst MongoDB, ExpressJS, AngularJS und Node.js. Es kommt mit vorgruppierten und konfigurierten Modulen wie Mongoose und Passport.

22. LumX

Bild

Das erste reaktionsschnelle Front-End-Framework, das auf AngularJS- und Google Material Design-Spezifikationen basiert. Entwickelt für Entwickler und Designer, die mit mobilen und plattformübergreifenden Anwendungen arbeiten. Es fungiert als mit Sass erstelltes CSS-Framework, das eine große Anzahl integrierter AngularJS-Komponenten enthält.

Fazit


In Bezug auf Testtools benutze ich Jasmine mit Karma, um Dienste und Controller zu testen. Dies hilft mir sehr im Kampf gegen Fehler und Tippfehler, was mir viel Zeit gespart hat.

Alle drei vorgestellten Editoren sind gut, aber in jeder habe ich eine Reihe von Minus gefunden, zum Beispiel arbeitet JSfiddle langsamer als Codepen, es ist unmöglich, Fenster zu schließen oder zu verbergen. Codepen wiederum zeigt keine Fehler in JS, erinnert sich nicht an das Layout der Seite, Live-Vorschau in anderen Browsern nur mit einem kostenpflichtigen Konto.

AngularJS ist ein großartiges, sich ständig weiterentwickelndes Framework mit einer großen Community. Ich habe versucht, alle modernen Werkzeuge zu beschreiben, die ich für die Arbeit damit verwende. Aber sie sind heute sehr häufig anzutreffen. Wenn Sie also etwas zur Liste hinzufügen möchten, hinterlassen Sie unbedingt einen Kommentar bei Ihrem AngularJS-Helfer.

Jetzt auch beliebt: