© Excellent backgrounds/Shutterstock.com
Java Magazin
Teil 1: Erste Schritte mit Angular 2 und TypeScript

Moderne Frontends für alle Plattformen

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.

Manfred Steyer


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.

ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

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 Mai 2016 als Release Candidate verfügbar. Das bedeutet, dass sich die zugrunde liegenden Konzepte 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 Type­Script, die auch das Angular-2-Team zum Entwickeln des Frameworks heranzieht. Sie bietet Möglichkeiten des aktuellen JavaScript-Standards ECMA­Script 6, wie Klassen, Module und Lambda-Ausdrücke. Zusätzlich bietet Type­Script die Möglichkeit einer statischen Typisierung. Mithilfe des Type­Script-Compilers lässt sich der geschriebene Code in handelsübliches JavaScript (ECMA­Script 5) überführen, das in jedem gängigen Browser läuft.

Abb. 1: Erstellung einer SPA zum Buchen von Flügen

Projekt-Set-up: Man nehme …

Als Entwicklungsumgebung für den Start mit Angular 2 empfiehlt sich der leichtgewichtige Editor Visual Studio Code [1], der für Linux, Mac OS und Windows zur Verfügung steht und eine gute Unterstützung für Type­Script mit sich bringt. Um hier keinen Platz mit dem Projekt-Set-up zu verschwenden, sei an dieser Stelle auf den so genannten Quickstart des Angular-Teams unter verwiesen [2]. Wer keine Zeit mit dem dort beschriebenen schrittweisen Einrichten einer Angular-Anwendung vergeuden möchte,...

Java Magazin
Teil 1: Erste Schritte mit Angular 2 und TypeScript

Moderne Frontends für alle Plattformen

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.

Manfred Steyer


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.

ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

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 Mai 2016 als Release Candidate verfügbar. Das bedeutet, dass sich die zugrunde liegenden Konzepte 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 Type­Script, die auch das Angular-2-Team zum Entwickeln des Frameworks heranzieht. Sie bietet Möglichkeiten des aktuellen JavaScript-Standards ECMA­Script 6, wie Klassen, Module und Lambda-Ausdrücke. Zusätzlich bietet Type­Script die Möglichkeit einer statischen Typisierung. Mithilfe des Type­Script-Compilers lässt sich der geschriebene Code in handelsübliches JavaScript (ECMA­Script 5) überführen, das in jedem gängigen Browser läuft.

Abb. 1: Erstellung einer SPA zum Buchen von Flügen

Projekt-Set-up: Man nehme …

Als Entwicklungsumgebung für den Start mit Angular 2 empfiehlt sich der leichtgewichtige Editor Visual Studio Code [1], der für Linux, Mac OS und Windows zur Verfügung steht und eine gute Unterstützung für Type­Script mit sich bringt. Um hier keinen Platz mit dem Projekt-Set-up zu verschwenden, sei an dieser Stelle auf den so genannten Quickstart des Angular-Teams unter verwiesen [2]. Wer keine Zeit mit dem dort beschriebenen schrittweisen Einrichten einer Angular-Anwendung vergeuden möchte,...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang