15 Nützliche AngularJS-Tools für Entwickler
Denken Sie daran, Ihre Zehen in Angular zu tauchen? Wenn Sie unsere 10 besten Tutorials durchlaufen haben, um den AngularJS-Beitrag zu lernen, und mit Angular alleine spielen möchten, sind Sie hier genau richtig. Wir haben hier einige Tools, die Ihren Entwicklungsworkflow rationalisieren können.
Wir schauen uns 15 an beste IDEs, Texteditoren, Tools zum Testen und Debuggen, Module und Entwicklungstools und Apps zum Bauen mit Angular. Wenn Sie über Ihre bevorzugten Tools oder Apps verfügen, teilen Sie sie uns in den Kommentaren unten mit.
IDE & Texteditor
In der Programmierwelt gibt es zwei Arten von Editoren: Voll funktionsfähige integrierte Entwicklungsumgebung (IDE) und leichte Texteditoren. Beide ermöglichen einen schnelleren Entwicklungsworkflow. Die unten aufgelisteten IDE- und Texteditor-Tools sind sehr gute Werkzeuge, um die Entwicklung von Angular zu beschleunigen. Sie können leicht für die Angular-Umgebung konfiguriert werden.
WebStorm
WebStorm eignet sich nicht nur für Javascript, sondern auch für HTML und CSS. Es verfügt über einen fantastischen Live-Editor, mit dem Sie Ihre Codierungsergebnisse im Browser anzeigen können, ohne dass häufiges Aktualisieren erforderlich ist. Die neueste Version enthält standardmäßig das AngularJS-Plugin-Bundle. Sie müssen jedoch zunächst das Angular-Skript in Ihr Projekt einfügen. Weitere Informationen finden Sie im WebStorm-Blogeintrag.
Aptana
Aptana ist eine kostenlose Open Source IDE, die eigentlich die angepasste Version von Eclipse ist und sich auf Javascript, HTML, CSS und andere Web-Goodies konzentriert. Um die Aptana-Unterstützung für Angular zu erweitern, müssen Sie lediglich die Erweiterung AngularJS Eclipse von der. Installieren Eclipse Marketplace.
Erhabener Text
Sublime Text ist einer der beliebtesten verfügbaren Texteditoren und wird von vielen geliebt, da er sich an jede Art von Programmierumgebung anpassen lässt. Es ist auch schnell und bietet anpassbare Codeausschnitte sowie viele Pakete, einschließlich des Pakets AngularJS, mit dem Sie mit Angular arbeiten können. Hier ist ein großartiger Beitrag von Dan Wahlin, den Sie hierüber anschauen können.
Mehr zu Sublime Text:
- 18 wesentliche Sublime Text Plugins
- 12 Meistgesuchte Sublime-Tipps und Tricks
- So fügen Sie den Dateipfad in Sublime-Text ein
- Localhost-Projekt mit Sublime Text in der Vorschau
- Verwalten von Notizen und Listen mit überhöhtem Text
- CSS-Herstellerpräfix mit Sublime-Text hinzufügen
Test- und Debugging-Tools
Testen und Debuggen sind wichtige Teile des Entwicklungsprozesses, insbesondere in einer Umgebung wie Angular. Im Folgenden finden Sie einige Tools, mit denen Sie Ihre Anwendung testen und debuggen können.
Karma
Karma ist ein großartiger Testläufer für Angular, kann aber auch mit jedem anderen Javascript-Framework verwendet werden. Es unterstützt jede Art von Tests: Unit-Tests, Midway-Tests und E2E-Prüfung. Karma funktioniert, indem Sie Browser öffnen, die Sie in der Konfigurationsdatei auflisten. Anschließend kommuniziert es mit dem aktiven Browser über socket.io und fragt Sie, ob der Test ausgeführt werden soll oder nicht.
Jasmin
Jasmin wird für verhaltensgesteuerte Entwicklung (BDD) verwendet, Sie können es jedoch mit etwas Anpassung für testgetriebene Entwicklung (TDD) verwenden. Es ist normalerweise mit Karma gekoppelt: Karma als Testläufer, Jasmin als Testframework. Jasmine überprüft automatisch alle Ihre Javascript-Klassen und -Funktionen und benachrichtigt Sie über nicht behandelten Code. Der Nachteil ist Es ist nicht bekannt, in welcher Umgebung (Browser) der Test ausgeführt wurde, Karma gleicht diesen Nachteil aus.
MochaJS
Im Vergleich zu Jasmine, MochaJS ist flexibler aber Jasmine ist ein All-in-One-Paket. Wenn Sie mit MochaJS ein Spionage-Framework verwenden möchten, müssen Sie Mocha mit seiner entsprechenden Bibliothek wie sinon.js einrichten. Wenn Sie ein Assertions-Framework benötigen, muss Mocha mit einem Framework wie Chai konfiguriert werden.
Winkelmesser
Der Winkelmesser ist wahrscheinlich der leistungsfähigste automatisiert Ende zu Ende (e2e) Winkelprüfwerkzeug. Protractor wurde vom Angular-Team entwickelt und kombiniert einige der heute verfügbaren Technologien NodeJS, Selen, webDriver, Mokka, Gurke und Jasmin.
Angular Batarang
Außerdem Winkelmesser, Ein weiteres großartiges Werkzeug, das vom Angular-Team entwickelt wurde, ist Angular Batarang. Batarang ist eine Chrome-Erweiterung zum Debuggen von Angular-Anwendungen. Nachdem Sie Ihre App überprüft haben, zeigt Ihnen Batarang die Modell, Leistung und Abhängigkeit Debugging-Ergebnisse in drei verschiedenen Registerkarten. Sie können die Inspektion auch steuern, indem Sie entscheiden, ob das angezeigt werden soll Anwendungen, Bindungen oder Bereiche.
ng-Inspektor
ng-inspector ist eine Browser-Erweiterung, die von Chrome und Safari unterstützt wird. Im Gegensatz zu Batarang, das in DevTools angezeigt wird, bevorzugt der ng-inspector die Anzeige auf der Seite. Sie können DOM-Elemente prüfen und hervorheben, wenn Sie den Mauszeiger über einen Bereich bewegen. Sie können auch den Umfang und das Modell in Echtzeit aktualisieren.
Module
Angular-Module finden Sie am besten unter ngmodules.org. Wenn Sie einen schnellen Überblick benötigen, finden Sie unten eine Liste einiger guter Ressourcen, die wir für Sie gesammelt haben.
AngularUI
AngularUI ist eine Sammlung von mit AngularJS erstellten UI-Komponenten. Die Utility-Anweisungen helfen Ihnen, Angular-Anwendungen schneller zu erstellen. Anstelle von Widgets verwendet AngularUI Direktanweisungen wie ui-router, ui-karte, ui-kalender usw. Die Anweisungen, die Ihnen wahrscheinlich am besten gefallen werden, sind die UI-Bootstrap-Funktionen, die das native Verhalten ermöglichen Erstellen Sie Twitter Bootstrap in Angular. Schauen Sie sich die saubere und schöne Dokumentationsseite an, um zu beginnen.
ng-Table - Sortier- und Filtertabelle
Wenn Sie in Ihrer Webanwendung Tabellen benötigen, die sortiert und gefiltert werden können, ist ngTable das Werkzeug, nach dem Sie suchen. Es unterstützt auch variable Zeilenhöhen und hervorragende Seitenumbruchfunktionen.
Restangular
Mit Angular kann es schwer werden, zu arbeiten $ Ressource und $ http zum Erstellen der Rest-API. Restangular kann helfen Die Verwendung von Datenabrufen zum Abrufen, Löschen, Aktualisieren und Veröffentlichen von Daten wird einfacher. Einige Funktionen, die Restangular von anderen unterscheiden $ Ressource Unterstützung für HTTP-Methoden, selbstverknüpfendes Element, verspricht die Verwendung und vieles mehr. Erfahren Sie hier mehr und sehen Sie sich die Live-Demo auf Plunkr an.
Angular Gettext
Angular-Gettext ist ein hervorragendes Angular-Modul für eine einfache Lokalisierung. Die wichtigsten Funktionen sind, dass Sie Ihre Web-App so einfach wie das Hinzufügen übersetzen können Attribut. Sie können sich auf Ihre App-Entwicklung konzentrieren und alle Übersetzungen Angular-Gettext überlassen.
Tools und Apps
Zum Schluss lassen wir das hier einfach. Es ist eine Liste mit weiteren Tools und Apps, die Ihren Angular-Entwicklungsprozess wahrscheinlich einfacher und reibungsloser machen können. Sie arbeiten gut mit denen zusammen, die gerade anfangen, Angular aufzunehmen.
Generator winkelig
Yeoman hat einen Codegenerator namens Generator Angular. Mit diesem Tool können Sie Ihre Angular-Entwicklung nur mit Terminalbefehlspaaren beschleunigen. Es kann automatisch Entwicklungsserver, Unit- und Framework-Tests, Ansichten, Anweisungen und mehr generieren.
ngDocs - AngularJS-Referenz
ngDocs ist eine Android-App, die AngularJS-Dokumentation und -Referenzen bereitstellt. Einige grundlegende Tutorials sind auch verfügbar, wenn Sie mit Angular noch nicht vertraut sind. Es gibt zusätzliche Funktionen wie ein Entwicklerhandbuch und Fehlerreferenzen, die Sie möglicherweise sehen möchten. Mit diesem Gerät auf Ihrem Android-Gerät können Sie Angular überall nutzen.
