© Matej Kotula/Shutterstock.com
JavaScript Kompendium
JavaScript mit Angular 2 beherrschbar machen

Tutorial: Wartbare Frontends entwickeln

Mit dem populären JavaScript-Framework Angular 2 lassen sich auf einfache Weise wiederverwendbare und wartbare Frontends für sämtliche Plattformen entwickeln. Es bietet einen komponentenorientierten Ansatz und setzt zur Steigerung der Testbarkeit auf Dependency Injection.

Manfred Steyer


Heutzutage stehen Entwickler immer häufiger vor der Herausforderung, Anwendungen für sämtliche mobile und klassische Plattformen bereitstellen zu müssen. Als Lösung bietet sich der Einsatz von Webtechnologien an, die auf sämtlichen Plattformen laufen und Web-APIs via HTTP konsumieren. Das vorliegende Tutorial, das die Entwicklung einer einfachen Anwendung zum Suchen nach Flügen beschreibt, nimmt sich diesem Thema an. Während der vorausgegangene Teil dieser Serie die Entwicklung eines Web-API mit ASP.NET Core 1.0 adressierte, wendet sich dieser Teil der Erstellung eines webbasierten Frontends zu. Artikelserie Teil 1: Ein Backend für alle Fälle Teil 2: JavaScript mit Angular 2 beherrschbar machen Teil 3: Routing und Security Teil 1: Ein Backend für alle FälleTeil 2: JavaScript mit Angular 2 beherrschbar machenTeil 3: Routing und SecurityProjekt-Set-upAls 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 TypeScript mit sich bringt. Um hier keinen Platz mit dem Projekt-Set-up zu verschwenden, sei an dieser Stelle auf das Tutorial unter [2] verwiesen. Die komplette hier beschriebene Implementierung findet sich unter [3].Eine erste KomponenteAngular 2 ist komponentenorientiert aufgebaut. Das bedeutet, dass die gesamte Anwendung eine Komponente ist. Diese so genannte Top-Level Component besteht aus weiteren Komponenten, die wiederum aus weiteren Komponenten bestehen können. Somit ergibt sich, wie bei anderen UI-Frameworks auch, ein Komponentenbaum. Eine Angular-2-Komponente besteht aus zwei Teilen: einem Component-Controller, der die Logik beinhaltet, und einem Template, das das Markup zur Darstellung bietet. Der Component-Controller der hier beschriebenen Komponente, die das Suchen von Flügen erlaubt, findet sich in Listing 1. Es handelt sich dabei um eine TypeScript-Klasse, die das UI auf abstrakter Ebene widerspiegelt.Der Konstruktor lässt sich den von Angular 2 gebotenen HTTP-Service injizieren. Dabei handelt es sich um ein Objekt zum Zugriff auf Ressourcen, wie Web-APIs via HTTP. Durch die konsequente Unterstützung von Dependency Injection erhöht Angular 2 die Testbarkeit der entwickelten Komponenten.Die Eigenschaften von und nach repräsentieren die Flugroute, für die der Anwender Flüge suchen möchte. Das Array fluege nimmt die gefundenen Flüge auf. Es ist mit dem Interface IFlug (Listi...

JavaScript Kompendium
JavaScript mit Angular 2 beherrschbar machen

Tutorial: Wartbare Frontends entwickeln

Mit dem populären JavaScript-Framework Angular 2 lassen sich auf einfache Weise wiederverwendbare und wartbare Frontends für sämtliche Plattformen entwickeln. Es bietet einen komponentenorientierten Ansatz und setzt zur Steigerung der Testbarkeit auf Dependency Injection.

Manfred Steyer


Heutzutage stehen Entwickler immer häufiger vor der Herausforderung, Anwendungen für sämtliche mobile und klassische Plattformen bereitstellen zu müssen. Als Lösung bietet sich der Einsatz von Webtechnologien an, die auf sämtlichen Plattformen laufen und Web-APIs via HTTP konsumieren. Das vorliegende Tutorial, das die Entwicklung einer einfachen Anwendung zum Suchen nach Flügen beschreibt, nimmt sich diesem Thema an. Während der vorausgegangene Teil dieser Serie die Entwicklung eines Web-API mit ASP.NET Core 1.0 adressierte, wendet sich dieser Teil der Erstellung eines webbasierten Frontends zu. Artikelserie Teil 1: Ein Backend für alle Fälle Teil 2: JavaScript mit Angular 2 beherrschbar machen Teil 3: Routing und Security Teil 1: Ein Backend für alle FälleTeil 2: JavaScript mit Angular 2 beherrschbar machenTeil 3: Routing und SecurityProjekt-Set-upAls 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 TypeScript mit sich bringt. Um hier keinen Platz mit dem Projekt-Set-up zu verschwenden, sei an dieser Stelle auf das Tutorial unter [2] verwiesen. Die komplette hier beschriebene Implementierung findet sich unter [3].Eine erste KomponenteAngular 2 ist komponentenorientiert aufgebaut. Das bedeutet, dass die gesamte Anwendung eine Komponente ist. Diese so genannte Top-Level Component besteht aus weiteren Komponenten, die wiederum aus weiteren Komponenten bestehen können. Somit ergibt sich, wie bei anderen UI-Frameworks auch, ein Komponentenbaum. Eine Angular-2-Komponente besteht aus zwei Teilen: einem Component-Controller, der die Logik beinhaltet, und einem Template, das das Markup zur Darstellung bietet. Der Component-Controller der hier beschriebenen Komponente, die das Suchen von Flügen erlaubt, findet sich in Listing 1. Es handelt sich dabei um eine TypeScript-Klasse, die das UI auf abstrakter Ebene widerspiegelt.Der Konstruktor lässt sich den von Angular 2 gebotenen HTTP-Service injizieren. Dabei handelt es sich um ein Objekt zum Zugriff auf Ressourcen, wie Web-APIs via HTTP. Durch die konsequente Unterstützung von Dependency Injection erhöht Angular 2 die Testbarkeit der entwickelten Komponenten.Die Eigenschaften von und nach repräsentieren die Flugroute, für die der Anwender Flüge suchen möchte. Das Array fluege nimmt die gefundenen Flüge auf. Es ist mit dem Interface IFlug (Listi...

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