Manfred Steyer Selbstständig

Angular 2 macht zusammen mit ECMAScript 6 bzw. TypeScript die Entwicklung von Web-Frontends beherrschbar.

Der Single-Page-Ansatz erlaubt die Entwicklung von webbasierten Frontends, die auf sämtlichen klassischen und mobilen Plattformen laufen und durch den Einsatz von JavaScript einen hohen Grad an Benutzerfreundlichkeit bieten. Das Framework Angular 2 unterstützt das und ermöglicht das Erreichen einer hohen Codequalität mit bewährten Konzepten, wie Komponentenorientierung und Dependency Injection.

Moderne Weblösungen sind vor allem im Umfeld von Geschäftsanwendungen derzeit sehr populär, da sie auf allen vorherrschenden Plattformen laufen und durch JavaScript und CSS ein hohes Maß an Benutzerfreundlichkeit bieten. Diese so genannten Single-Page-Applikationen (SPA) weisen eine Architektur auf, die der von klassischen verteilten Anwendungen entspricht. Im Wesentlichen sieht sie einen Client vor, der Services via HTTP konsumiert. Diese haben wiederum Zugriff auf Unternehmensressourcen, wie Datenbanken oder ERP-Systeme. Das vorliegende Tutorial zeigt, wie sich eine solche moderne Cross-Plattform-Lösung entwickeln lässt. Hierzu wird die Erstellung einer SPA zum Buchen von Flügen beschrieben. Abbildung 1 gibt einen ersten Vorgeschmack darauf.

Um die Komplexität der zugrunde liegenden Webtechnologien beherrschbar zu machen, kommt die neue Version 2 des populären JavaScript-Frameworks Angular (in Version 1 noch AngularJS genannt) zum Einsatz. Dieses stammt aus der Feder von Google und erfreut sich einer großen Community. Angular 2 ist seit Dezember 2015 in der Betaphase. Das bedeutet, laut Aussagen des Produktteams, dass sich die zugrunde liegenden Konzepte sowie der Kern nicht mehr ändern sollen. Nichtsdestotrotz kann es an den hier vorgestellten Aspekten bis zur finalen Veröffentlichung zu kleineren Änderungen kommen.

Zusätzlich nutzt dieses Tutorial die Sprache TypeScript, die auch das Angular-2-Team zum Entwickeln des Frameworks heranzieht. Sie bietet Möglichkeiten des aktuellen JavaScript-Standards ECMAScript 6, wie Klassen, Module und Lambda-Ausdrücke. Zusätzlich bietet TypeScript die Möglichkeit einer statischen Typisierung. Mithilfe des TypeScript-Compilers lässt sich der geschriebene Code in handelsübliches JavaScript (ECMAScript 5) überführen, das in jedem gängigen Browser läuft.

Projekt-set-up: Man nehme …

Als Entwicklungsumgebung für den Start mit Angular 2 empfiehlt sich der leichtgewichtige Editor Visual Studio Code, der für Linux, Mac OS und Windows zur Verfügung steht und eine gute Unterstützung für TypeScript mit sich bringt. Um hier keinen Platz mit dem Projekt-set-up zu verschwenden, sei an dieser Stelle auf das Tutorial auf Softwarearchitekt.at verwiesen. Die komplette hier beschriebene Implementierung findet sich auf GitHub.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Java Magazin 7.16 - "SMACK: Die neue Generation Big Data"

Alle Infos zum Heft
246865Erste Schritte mit Angular 2
X
- Gib Deinen Standort ein -
- or -