Wie Angular 2 in aktuellen Entwicklungsumgebungen unterstützt wird

Angular 2 IDE-Vergleich: IntelliJ vs. NetBeans vs. Eclipse

Karsten Sitterberg, Ekaterina Prigara, Angelo Zerr

Angular 2 wird bereits in vielen aktuellen Entwickler-Tools unterstützt – allerdings in unterschiedlichem Maße. Wir haben uns die drei großen IDEs Eclipse, NetBeans und IntelliJ IDEA (bzw. WebStorm) vorgenommen und zeigen, was jetzt schon geht – und was noch nicht.

Angular 2 in IntelliJ IDEA

ekaterina_prigara

Ekaterina Prigara

AngularJS ist nun bereits seit einiger Zeit im Umlauf und hat sich als eines der besten Frameworks für die Webentwicklung bewährt. Auch der Nachfolger Angular 2 wird bereits genutzt, obwohl sich das Framework noch in der Entwicklung befindet. Das Tooling dafür ist aber schon fertig: Die neuste Version von IntelliJ IDEA Ultimate bringt (genau wie WebStorm, PhpStorm, PyCharm Professional und RubyMine) eine umfassende Unterstützung für Angular 2 und TypeScript, die empfohlene Sprache für Projekte in Angular 2, mit.

Schauen wir uns also an, wie die Entwicklung von Angular-2-Projekten in IntelliJ IDEA und den anderen IDEs von JetBrains unterstützt wird. Vor dem Start sollte man sicherstellen, dass das AngularJS-Plug-in in der verwendeten IDE vorhanden ist (das lässt sich unter Preferences => Plugins überprüfen), und dass Node.js sowie npm auf dem PC installiert sind.

Ein neues Angular-2-Projekt mit Angular CLI erstellen

Einer der einfachsten Wege, um ein erstes Projekt in Angular 2 zu erstellen, ist die Verwendung von Angular CLI: Dabei handelt es sich um ein Interface, das vom Angular-Team entwickelt wurde und das für die Einrichtung eines neuen Angular-2-Projekts mit allen notwendigen Abhängigkeiten und Einstellungen empfohlen wird.

Zuerst muss Angular CLI global via npm installiert werden:

npm install -g angular-cli

Auf dem Welcome Screen von IntelliJ IDEA geht es nun so weiter: Klicken Sie auf Create New Project, wählen Sie Angular CLI unter Static Web aus, geben Sie dort den Projektnamen ein; dann noch ein Klick auf okay – und schon kann’s losgehen.

Angular 2 in IntelliJ IDEA

Das Projekt kompilieren

Um ein TypeScript-Projekt in JavaScript zu kompilieren, kann entweder der in IntelliJ IDEA integrierte TypeScript Compiler verwendet werden (der unter Preferences => Languages & Frameworks => TypeScript aktiviert wird) oder das Angular-CLI-Kommando ng serve. In unserem Beispielprojekt haben wir das dem npm start-Task im package.json-File zugewiesen und können es im Terminal oder dem npm-Fenster der Entwicklungsumgebung ausführen.

Angular 2 in IntelliJ IDEA 2

ng serve kompiliert die Dateien und startet einen lokalen Server, auf dem eine Vorschau des Projekts aufgerufen werden kann. Die App wird im Browser bei Änderungen außerdem live aktualisiert. Alle notwendigen Compiler-Optionen sind in der Datei tsconfig.json spezifiziert.

Wenn Sie zusätzlich Use experimental TypeScript service in den Einstellungen für TypeScript aktivieren, zeigt IntelliJ IDEA Fehler aus dem Compiler direkt im Editor sowie im TypeScript-Toolfenster an.

Tipp: Zur Verbesserung der Performance kann der tmp Ordner, der von Angular CLI erzeugt wird, als Excluded markiert werden. Dazu klicken Sie im Projektfenster mit der rechten Maustaste darauf und wählen dann Mark as Excluded aus.

Code-Vervollständigung, Navigation und Refactoring

Code Angular-spezifisch ergänzen
Einer der großen Vorteile bei der Verwendung von TypeScript liegt darin, dass die Coding-Praxis Ähnlichkeit mit der in anderen Typen-basierten Sprachen, wie etwa Java, aufweist. IntelliJ IDEA kann beispielsweise während des Tippens automatisch TypeScript-Symbole aus anderen Dateien und Modulen importieren.

Angular 2 in IntelliJ IDEA 3

Die IDE stellt eine Angular-spezifische Code-Vervollständigung zur Verfügung. Hier sind einige Beispiele:

In Angular-Templates werden Vorschläge zur Vervollständigung von Angular-spezifischen Events (inklusive Custom Event Handlers, die mit dem @OutputDecorator definiert wurden) und Property Bindings gemacht:

Angular 2 in IntelliJ IDEA 4

Die Code-Vervollständigung funktioniert auch für Methods, die in der Komponente definiert wurden:

Angular 2 in IntelliJ IDEA 5

IntelliJ IDEA bringt außerdem eine Auswahl beliebter Code Snippets für Angular 2 mit. Wenn die Abkürzung des Snippets eingetippt oder der Code aus einem Vervollständigungsvorschlag ausgewählt wird, muss nur auf Tab gedrückt werden, um die Snippets zu erweitern. Mit erneutem Klicken von Tab kann darin zum nächsten Bearbeitungspunkt gesprungen werden. Die Liste der integrierten Snippets können Sie unter Preferences => Editor => Live templatedAngular 2 abrufen.

Angular 2 in IntelliJ IDEA 6

Navigation im Projekt
Mit STRG + Klick (oder CMD + Klick unter OS X) können Sie zur Definition jeder Klasse, Funktion, Methode, Variable oder Komponente navigieren. Die Aktion Go to class (STRG + N unter Windows, CMD + O auf OS X) – den meisten Nutzern von IntelliJ dürfte sie schon benannt sein – ist sehr nützlich bei der Arbeit mit TypeScript.

Die Angular-spezifische Navigation umfasst unter anderem:

  • Navigation vom Pfad zur Datei in styleURLs und templateURL.
  • Sprünge von der Verwendung einer Komponente im HTML-File zur Komponenten-Definition (zu @Component, wo der Name der Komponente im Selector Parameter spezifiziert wurde).
  • Navigation von einem One-Way-Binding in der Komponente zu den Eigenschaften, die mit @Input in der Komponenten-Definition definiert wurde.

Angular 2 in IntelliJ IDEA 7

Refactoring von Angular-2-Komponenten und –Methods
Mit den Refactoring-Optionen in IntelliJ IDEA können Sie viel Zeit sparen. So kann etwa für die Namen von Komponenten Refactor – Rename verwendet werden. Dazu drücken Sie STRG + T in den Tag– oder Selector-Eigenschaften in der Komponenten-Definition und wählen dort Rename aus.

Angular 2 in IntelliJ IDEA 8

Rename funktioniert auch für Standard-Event Handler sowie für Klassennamen und Methoden, die in der Komponente definiert wurden.

Angular 2 in IntelliJ IDEA 9

Für Methoden steht außerdem das praktische Change Signature-Refactoring zur Verfügung. Safe Delete ist ein weiteres Refactoring und überprüft, ob Methoden und Klassen, die gelöscht werden sollen, nirgendwo mehr in Verwendung sind. Wer mehr über die Coding Assistance in Angular 2 wissen möchte, kann diesen Blogpost lesen.

Testing

Für Client-seitige Unit-Tests empfehlen wir die Verwendung von Karma. Mit Angular CLI erstellte Projekte bringen eine Karma-Konfigurationsdatei mit (siehe karma.config.js im config-Ordner), sowie alle für das Testen notwendigen Abhängigkeiten und sogar einige Beispiel-Tests im Ordner src/app.

IntelliJ IDEA kann über ein zugehöriges Plug-in mit Karma verbunden werden. Sobald Tests durchgeführt werden (Rechtsklick auf karma.config.json, dann Run auswählen), können die Ergebnisse in einem spezifischen Tool-Fenster eingesehen, durchsucht und gefiltert werden; auch die Navigation vom Test-Namen zur zugehörigen Quelle ist möglich. Zur Durchführung von Karma-Tests gibt es ebenfalls einen Blogpost mit weiteren Erklärungen.

Angular 2 in IntelliJ IDEA 10

Wir hoffen, dass der erweiterte Support für Angular 2 in IntelliJ IDEA, WebStorm und anderen JetBrains IDEs Ihnen den Einstieg in das neue Framework erleichtert.



Angular 2 in NetBeans

Karsten Sitterberg

Karsten Sitterberg

NetBeans ist eine beliebte Wahl als IDE: quelloffen, kostenlos, mit Unterstützung für viele Sprachen wie PHP, JavaScript, Java und C++ und auch Frameworks sowie Anwendungs-Server. Auch ein umfassender Support für die Entwicklung von Angular-2-Browseranwendungen ist bereits mit an Bord.

NetBeans kann von der Webseite https://netbeans.org/ für alle Plattformen heruntergeladen werden. Für die Angular-2-Entwicklung bietet sich die HTML5-Edition oder alternativ der vollständige Download mit allen Features an.

Angular-2-Anwendungen können grundsätzlich in allen Sprachen entwickelt werden, die zu JavaScript übersetzt werden können. Populäre Vertreter sind dabei JavaScript selbst, Dart und TypeScript. NetBeans 8.2, derzeit als Entwicklerversion verfügbar, unterstützt zwar JavaScript in Version ES2015, die Referenzdokumentation, die Tutorials und die meisten Beispiele für Angular 2 sind jedoch in TypeScript umgesetzt.

TypeScript ist eine Obermenge von ES2015 und fügt (optionales) Typing, Vererbung und Decorators zu den ES2015-Klassen hinzu. Da insbesondere mobile Browser ES2015 noch nicht vollständig unterstützen, ist somit eine Transpilation zu ES5 sowieso unentbehrlich. Damit kann auch direkt TypeScript eingesetzt und von den damit verbundenen Vorteilen profitiert werden. Vor allem bei umfangreichen und langlebigen Anwendungen gewinnen die Vorteile von TypeScript an Relevanz.

NetBeans erhält TypeScript-Support durch das von der Firma Everlaw entwickelte Plug-in nbts. Um das Plug-in zu installieren, kann dieses als NBM von GitHub heruntergeladen werden.

Angular 2 NetBeans 1

Anschließend wird das Plug-in im NetBeans Plugin Manager installiert, das geht wie folgt: ToolsPlugins aufrufen, dann den Reiter Downloaded auswählen und mit Add Plugins die heruntergeladene Datei zur Auswahl hinzufügen. Die Installation wird durch einen Klick auf Install gestartet.

Angular 2 NetBeans 2

Angular 2 NetBeans 3

Das Plug-in nbts nutzt intern den offiziellen TypeScript-Compiler von Microsoft. Dadurch sind die Fehlermeldungen und Hinweise der statischen Codeanalyse und von TypeDoc sehr nah bei den Meldungen, die man durch den TypeDoc Generator oder tsc Compiler auf der Kommandozeile erhält. Man bekommt somit einheitliche Meldungen zwischen IDE und Buildtools und profitiert von den aktuellen Entwicklungen der TypeScript-Tools.

Andere IDEs, die eine eigene Implementierung nutzen, können schon mal abweichende oder gar fehlerhafte Meldungen generieren. Besonders ärgerlich ist, wenn Fehler von der IDE gemeldet werden, die im tatsächlichen Build zu gar keinen Problemen führen.

Benötigte Software

Wir benötigen node.js und den Node Package Manager (npm) für die meisten Entwicklungs- und Testwerkzeuge. Die Installation unter Ubuntu kann von der Kommandozeile erfolgen:

sudo apt-get install nodejs npm

Die Konfiguration in NetBeans ist denkbar einfach: In den NetBeans-Einstellungen (zu erreichen über ToolsOptions) wird der Reiter HTML5/JS ausgewählt und jeweils für den Node Path und npm Path der Button Search gedrückt. Damit der Node Support von NetBeans gut funktioniert, müssen die Node Sourcen noch heruntergeladen werden. Dies lässt sich mit dem Download-Knopf starten.

Angular 2 NetBeans 4

Ein Angular-2-Projekt mit NetBeans starten

Um Entwicklern den Start zu erleichtern, gibt es zwei schnelle Wege zu einem eigenen Projekt: Entweder man verwendet ein sogenanntes „Seed Projekt“ oder die Angular-2-Kommandozeilenwerkzeuge (Angular CLI).

Für diesen Artikel gibt es ein auf Angular 2 RC4 basierendes Seed Projekt bei GitHub, mit dem anschließend direkt losgelegt werden kann, es ist hier zu finden.

Nachdem das Projekt geklont oder als ZIP-Datei heruntergeladen ist, kann es von NetBeans über Open Project direkt geöffnet werden. NetBeans erkennt Ordner mit einer package.json-Datei automatisch als HTML5/JavaScript-Projekt.

Angular 2 NetBeans 5

Jetzt fehlen nur noch die benötigten JavaScript-Bibliotheken als Abhängigkeiten. Diese werden durch npm installiert. Auch das kann direkt aus der NetBeans IDE heraus geschehen: Rechtsklick auf das Projekt und npm install auswählen:

Angular 2 NetBeans 6

NetBeans kann direkt einen Browser starten, optional sogar mit NetBeans-Plug-in (Chrome/Chromium), um beispielsweise direkt in der IDE Fehlermeldungen anzuzeigen und HTTP Requests zu analysieren. Die Konfiguration des richtigen Browsers erfolgt über das Drop-down-Menü in der Werkzeugleiste.

Angular 2 NetBeans 7

TypeScript Compiler und NetBeans-Projektstruktur einrichten

Damit TypeScript zu ES5 transpiliert wird, wird der TypeScript Compiler tsc genutzt. Die Konfiguration dafür befindet sich in der Datei tsconfig.json. Sie sollte sich ganz oben im Projekt neben der package.json befinden.

In NetBeans wird als Project root und Site Root der selbe Ordner konfiguriert, indem Site Root auf den leeren Pfad gesetzt wird. Dies erfolgt über die Projekteigenschaften (Rechtsklick auf das Projekt und Properties auswählen).

Angular 2 NetBeans 8

Angular-2-Schnellstart

Angular 2 wird genutzt, um hochperformante HTML5/JavaScript-Anwendungen zu erstellen. Unter der Haube werden verschiedene JavaScript-Bibliotheken wie RxJS oder zone.js genutzt, um ein höherwertiges Programmiermodell für Komponenten (@Component) und Services (@Injectable) bereitzustellen. Services sollen dabei Geschäftslogik bereitstellen, während die Komponenten das Bindeglied zur Darstellung und Anwendungsstruktur liefern.

Beispielprojekt

Das Bespielprojekt für diesen Artikel enthält eine einfache Komponente, die es erlaubt, einen Namen in ein Eingabefeld einzutragen und ihn wieder auszugeben. Mit einem Knopf kann die Ausgabe ein- und ausgeschaltet werden. Während der Eingabe kümmert sich Angular 2 in Echtzeit um das Data Binding, sodass die Ausgabe sofort auf Eingaben reagiert:

Angular 2 NetBeans 9

Auch wenn die Ausgabe durch den Knopf entfernt wird, so bleibt der Anwendungszustand und das Data Binding erhalten: Auch wenn Änderungen vorgenommen wurden, während die Ausgabe deaktiviert war, sind diese nach der Reaktivierung sichtbar.

Angular 2 NetBeans 10

Projektstruktur

projectRoot/- tsconfig.json
            - index.html
            - systemjs.config.js
            - karma.conf.js
            - karma-test-shim.js
                - app/
                        - main.ts
                        - simple.component.ts
                        - simple.component.spec.ts
                - package.json
                - node_modules/
                - typings.json
                - typings/

Neben dem Ordner node_modules, der durch das npm install enstanden ist, enthält das Projekt den Ordner app. Die gesamten Anwendungs- und Testquellcodes werden hier abgelegt.

Die Datei main.ts enthält den notwendigen Code, um die Anwendung zu booten – danach übernimmt Angular 2 bzw. die Komponenten und Dependency Injection die Kontrolle. In der Datei simple.component.ts befindet sich die eigentliche Komponente, in simple.component.spec.ts die zugehörigen Unit-Tests. Als Rahmen für den Browser gibt es die Datei index.html; hier wird Angular 2 selbst und System.js geladen. Das HTML-Element für die Anwendungskomponente befindet sich ebenfalls hier. Der Module Loader System.js wird in systemjs.config.js konfiguriert.

NetBeans erkennt aktuell durch die strikte HTML-Validierung eigene Komponenten nicht immer korrekt. Entsprechende Warnungen können ignoriert oder die HTML-Prüfung deaktiviert werden.

Die Dateien karma.conf.js und karma-test-shim.js sind für den Testrunner Karma vorhanden, mit dem die Unit-Tests ausgeführt werden.

Sollen Bibliotheken verwendet werden, die nicht in TypeScript sondern in JavaScript geschrieben sind, so kann man für diese die Typinformationen beisteuern. Das zugehörige Werkzeug ist Typings, welches über die Datei typings.json konfiguriert wird. Die installierten Typings befinden sich dann im Ordner typings.

NetBeans mit TypeScript

Damit Entwickler produktiv arbeiten können, haben sich IDEs als Werkzeuge etabliert. Insbesondere Code-Vervollständigung und die Anzeige von Fehlern helfen schon sehr früh im Entwicklungsprozess. Zusammen mit dem TypeScript-Plug-in Everlaw kann NetBeans Syntaxfehler anzeigen und die Stellen, an denen eine Variable verwendet wird, markieren. Auch die Code-Vervollständigung wird durch das Plug-in implementiert.

Im Beispiel ist zu sehen, wie ein vergessener Import direkt als Fehler erkannt wird:

Angular 2 in NetBeans 11

NetBeans zeigt Vorschläge für die Code-Vervollständigung automatisch beim Tippen, sie kann jedoch auch manuell durch STRG + Leertaste aktiviert werden.

Angular 2 in NetBeans 12

Damit jeder Browser die in TypeScript geschriebenen Programme ausführen kann, wird der Quellcode beim Speichern durch NetBeans automatisch zu ES5 JavaScript transpiliert. Alternativ kann durch npm eine vollständige Übersetzung erfolgen. Das zugehörige npm Script kann aus NetBeans heraus gestartet werden, indem nach einem Rechtsklick auf das Projekt tsc als NPM-Script ausgewählt wird.

Angular 2 in NetBeans 13

Das Plug-in nbts befindet sich in einer recht frühen Entwicklungsphase, kleinere Unschönheiten können somit auftreten. Beispielsweise werden Fehlermarkierungen manchmal nicht mehr zurückgesetzt, auch wenn der Fehler im Quellcode behoben ist. Hier hilft leider nur ein Neustart von NetBeans.

Testen mit NetBeans

NetBeans – auch in der HTML5-Version – unterstützt Unit-Tests von JavaScript-Code mit dem Testrunner Karma von Haus aus. Lediglich das zu verwendende Karma Binary muss konfiguriert werden: Wir verwenden Karma aus dem karma-cli-Modul, wie im Bild zu sehen ist.

Angular 2 in NetBeans 14

Karma-cli erkennt automatisch die in einem Projekt eingesetzte Karma-Version. Karma wird anhand der Datei karma.conf.js konfiguriert. Wenn NetBeans diese Datei findet, so werden automatisch die Features der Unit-Tests aktiviert. Die Tests werden gestartet, wenn man nach einem Rechtsklick auf das Projekt den Eintrag Test auswählt.

Angular 2 in NetBeans 15

NetBeans stellt eine grafische Aufbereitung der Testergebnisse und des aktuellen Verlaufs aller Tests bereit. Erfolgreiche Tests werden grün eingefärbt.

Angular 2 in NetBeans 16

Karma wird über das grüne K in der Projektansicht gesteuert. Hier kann Karma gestartet und auch wieder gestoppt werden.

Angular 2 in NetBeans 17

Auch die Auswahl alternativer Konfigurationen für den Karma-Aufruf aus NetBeans heraus kann hier erfolgen.

Angular 2 in NetBeans 18

Fazit

Durch das Plug-in nbts wird NetBeans zu einer gut geeigneten IDE für die Angular-2-Entwicklung aufgewertet. Essentielle Features wie Code-Vervollständigung, Syntax-Hightlighting und die automatische Übersetzung von TypeScript stehen zur Verfügung, auch komfortables Testen ist möglich. Leider gibt es derzeit keine Unterstützung für Angular-2-Templates mit Angular-2-spezifischer Syntax.

Positiv am Plug-in nbts ist, dass die offizielle TypeScript-Infrastruktur genutzt wird. Damit sind Fehlermeldungen und Ergebnisse der statischen Analyse nah am späteren Compile-Prozess. Da das Plug-in nbts von Everlaw aktiv weiterentwickelt wird, kann man darauf hoffen, dass aktuell bestehende Probleme in späteren Versionen behoben werden. Alle Leser – und Nutzer – sind dazu eingeladen, bei der aktiven Entwicklung des Projekts bei GitHub durch Fehlermeldungen und Pull-Requests mitzuhelfen.



Angular 2 in Eclipse

Auch in Eclipse gibt es eine erste Unterstützung für Angular-2-Anwendungen. Diese wird derzeit von Eclipse Committer Angelo Zerr entwickelt, der bereits als Autor des auf ternjs bzw. tern.java basierenden Plug-ins AngularJS Eclipse bekannt ist.

Eclipse, Angular und TypeScript

Angelo_Zerr

Angelo Zerr

Ich werde oft gefragt, wie man Angular 2 mit AngularJS Eclipse unterstützen kann. Angular 2 arbeitet bekanntlich mit TypeScript – selbst wenn man ES5- oder ES6-Code benutzen könnte, empfiehlt es sich, TypeScript zu nutzen. Ein Angular-2-Projekt wiederum wird mit einer (oder mehreren) tsconfig.json konfiguriert.

Während meinen TypeScript-Experimenten mit ternjs habe ich das großartige VSCode entdeckt, die neue IDE von Microsoft, die federführend von Erich Gamma entwickelt wird und TypeScript ohne Probleme unterstützt (siehe auch das Interview: “Wir möchten, dass VS Code zum beliebtesten Code-Editor wird”). Dabei stellte sich heraus, dass VSCode einen tsserver konsumiert, um Completion, Hover-Effekte, Validation usw. für TypeScript bereitzustellen – und das innerhalb des VSCode-Editors. Tsserver verwendet das TypeScript Service Language API, das wiederum tsconfig.json-Dateien nutzt. Wenn VSCode so etwas kann, warum sollte Eclipse nicht ebenfalls dazu in der Lage sein?

Darum habe ich mich entschieden, dieselbe Integration innerhalb von Eclipse mit typescript.java zu versuchen: Es stellt den schnellsten TypeScript-Editor bereit, der gut performt, auch wenn die Datei sehr umfangreich ist. Wenn man eine TypeScipt-Datei öffnet, wird der AST nicht geladen, die Syntax wird mit Eclipse ITokenScanner eingefärbt und für das Folding wird ein Einzug verwendend (wie bei VSCode). Zum Einfrieren sollte es deswegen nicht kommen.

TypeScript lässt sich wie VSCode integrieren, indem man tsserver verwendet, um tsconfig.json zu unterstützen und von tsserver-Verbesserung zu profitieren. Da tsserver auch JavaScript unterstützt, steht außerdem ein eigener JavaScript-Editor (Salsa) zur Verfügung. In diesem TypeScript Issue ist bspw. eine äußerst eindrucksvolle Demo mit Angular 2 zu sehen:

zerr1

Angular 2 Eclipse

Auf der Basis dieser TypeScript-Integration macht nun das Plug-in Angular 2 Eclipse die Entwicklungsumgebung Eclipse fit für Angular 2. Wir schauen uns den aktuellen Entwicklungsstand an und zeigen, was jetzt schon möglich ist:

1. Eclipse JEE Neon

Angular 2 Eclipse basiert auf Eclipse JEE Neon und nutzt Features der Eclipse Web Tools Platform (WTP). Der WTP JSON Editor versorgt die Entwicklungsumgebung mit Code-Vervollständigung für tslint.json, tsconfig.json, angular-cli.json und weitere Dateien:

zerr1Der WTP Validator sorgt für das Ignorieren von Fehlern des ng-Bindings. Mit Neon, werden ng (click)-Attribute nicht als Undefined attribute name (click) markiert.

zerr2

2. TypeScript

Wie oben beschrieben, basiert Angular 2 Eclipse auf der TypeScript IDE typescript.java, um die Unterstützung für TypeScript zu gewährleisten. Diese beinhaltet unter anderem Dinge wie completion, hover, hyperlink, outline:

zerr3

3. Angular CLI Integration

Durch Angular 2 Eclipse wird Angular CLI inklusive der Funktionen Terminal, Wizards integriert.

zerr4

Zudem macht Angular 2 Eclipse Launches in der Eclipse-IDE verfügbar, um Projekte zu erstellen und Server zu starten.

zerr5

4. Erweiterung des HTML-Editors

Angular 2 Eclipse erweitert den WTP HTML Editor um die Angular-2-Syntax-Hervorhebung, -validierung und Code-Vervollständigung innerhalb des HTML Editors. Dieser Support ist aktuell noch einfach: Es werden DOM event/property-Bindings und bekannte Direktiven wie etwa ngIf unterstützt. Was noch fehlt, ist die Unterstützung für individuelle Anwendungsdirektiven:

zerr6

Fazit

Der Download von Angular 2 Eclipse findet sich auf der entsprechenden GitHub-Seite. Allerdings muss betont werden, dass Angular 2 Eclipse sich derzeit noch in der Entstehungsphase befindet. Ein erstes vollständiges Release ist für Ende August oder im September dieses Jahres geplant.

Dieses Release wird sämtliche im Artikel beschriebenen Features beinhalten, inklusive der individuellen Anwendungsdirektiven (Vervollständigung, Navigation, Validation), sobald die Erweiterungsprobleme von TypeScript beseitigt sind (geplant für TypeScript 2.1.0).

Geschrieben von
Karsten Sitterberg
Karsten Sitterberg
Karsten Sitterberg ist als freiberuflicher Entwickler, Trainer und Berater für Java und Webtechnologien tätig. Karsten ist Physiker (MSc) und Oracle-zertifizierter Java Developer. Seit 2012 arbeitet er mit trion zusammen.
Ekaterina Prigara
Ekaterina Prigara
Ekaterina Prigara arbeitet als Product Marketing Managerin bei JetBrains. Sie ist Teil des WebStorm-Teams und konzentriert sich auf Webtechnologien und JavaScript.
Angelo Zerr
Angelo Zerr
Angelo Zerr ist enthusiastischer Java-EE-Entwickler, Eclipse Committer und Autor des Projekts tern.java, das die Basis des AngularJS-Plug-ins für Eclipse darstellt. Neben weiteren Open-Source-Projekten wie XDocReport hat Angelo die Eclipse E4 CSS Engine verfasst und Beiträge zu Eclipse Nebula geleistet. Zusammen mit dem JSDT-Projektteam arbeitet er in seiner Freizeit an einer Verbesserung des JavaScript-Supports in Eclipse. Angelo lebt in Saint Paul Trois Châteaux im Süden von Frankreich.
Kommentare
  1. Stanislav2017-01-09 11:17:55

    I like to use Codelobster for AngularJS development: http://www.codelobster.com/angularjs.html

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.