Sebastian Springer MaibornWolff

Die Wartezeit auf Angular 2 hat sich auf jeden Fall gelohnt: Angular ist extrem gut durchdacht und kann enorm viel leisten.

Endlich hat das Warten ein Ende: Angular ist in Version 2 erschienen. Jetzt stellt sich die Frage: Was nun? Wie nähert man sich dem Framework am besten an? Was kann man damit erreichen? Wie sieht das Ökosystem um das Framework aus? Diesen und zahlreichen weiteren Fragen werden wir uns auf den nächsten Seiten widmen. Dabei nähern wir uns Angular nicht nur auf dem Papier an, sondern Sie haben auch die Gelegenheit, anhand eines kleinen praktischen Beispiels die Vorzüge des Frameworks kennenzulernen und zu sehen, dass der Einstieg gar nicht so schwer fallen muss.

In den meisten Fällen werden Sie Ihre Angular-Applikation in TypeScript schreiben. Das hat im Vergleich zur Umsetzung in reinem JavaScript den Vorteil, dass der Quellcode der Applikation wesentlich aufgeräumter ist. Sie können außerdem saubere Schnittstellen schaffen, was die Arbeit im Team erheblich erleichtert; ebenso bekommen Sie Unterstützung von Ihrer Entwicklungsumgebung in Form von Autocomplete. Zusätzlich warnt Sie der TypeScript-Compiler, wenn Sie gegen das Typsystem verstoßen. Ein weiterer, ganz pragmatischer Grund für die Verwendung von TypeScript ist, dass die meisten Codebeispiele und Problemlösungen, die Sie im Internet finden werden, in TypeScript verfasst sind.

Anders als andere Frameworks erfordert Angular etwas mehr Aufwand für das initiale Projekt-Set-up. Das erste, das Sie in Ihrer neuen Applikation tun sollten, ist eine package.json-Datei anzulegen. Mit dem Befehl npm init erreichen Sie dies recht schnell. War Angular in der Version 1 noch nicht auf einen Paketmanager festgelegt, setzt Angular 2 zur Verwaltung der Abhängigkeiten strategisch auf npm. Angular besteht mittlerweile auch nicht mehr nur aus einem Paket, sondern aus einer Sammlung mehrerer Pakete. Dies ermöglicht es, das Framework nicht nur im Browser, sondern auch in Kombination mit NativeScript auf mobilen Endgeräten zu verwenden. Mit dieser Strategie können Teile des Frameworks ausgetauscht werden, was beispielsweise auch serverseitiges Rendering einer Applikation ermöglicht.

Doch zurück zur Paketstruktur. Die Kernpakete des Frameworks werden durch ein vorangestelltes @angular/ gekennzeichnet. So finden Sie den Kern von Angular beispielsweise in @angular/core oder den HTTP-Service in @angular/http. Neben den Abhängigkeiten enthält die package.json-Datei noch weitere Metainformationen zu Ihrem Projekt. Als Best Practice hat sich hier mittlerweile etabliert, dass in der scripts-Sektion der Datei einige hilfreiche Befehle zusammengefasst werden. Unter anderem finden Sie hier die Kommandos für die Installation, für die Ausführung des TypeScript-Compilers und für das Starten der Tests.

Zusätzlich zur package.json-Datei benötigen Sie noch weitere Dateien, damit Ihre Applikation lauffähig ist. So enthält beispielsweise tsconfig.json die Informationen für den TypeScript-Compiler. typings.json gibt an, an welcher Stelle die TypeScript-Definitionen für bestimmte Pakete zu finden sind. Je nachdem, welche Bibliothek Sie für die Modulunterstützung verwenden, müssen Sie diese ebenfalls noch konfigurieren. Haben Sie diese Voraussetzungen geschaffen, definieren Sie dann noch einen Startpunkt für Ihre Applikation in Form einer HTML- und einer initialen JavaScript-Datei.

Sie sehen also: Um Angular als Grundlage für Ihre Applikation zu verwenden, reicht es nicht aus, nur eine JavaScript-Datei einzubinden. Glücklicherweise ist dieser aufwendige Set-up-Prozess ein Kritikpunkt, der während der Entwicklung des Frameworks schon mehrere Personen gestört hat, sodass es hierfür einige sehr elegante Lösungen gibt. Der Ansatz, der direkt von den Angular-Entwicklern kommt, ist ein Kommandozeilenwerkzeug mit dem Namen Angular CLI.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 1.17 - "Angular 2"

Alle Infos zum Heft
301136Die ersten Schritte in Angular 2
X
- Gib Deinen Standort ein -
- or -