© Excellent backgrounds/Shutterstock.com
Java Magazin
JavaScript für den Enterprise-Einsatz

Die Anwendung erwacht zum Leben

Kaum eine Konferenz oder Fachzeitschrift hat sich des Themas AngularJS noch nicht angenommen. Auch Schulungs- und Projektanfragen bestätigen: AngularJS ist in Deutschland angekommen! Und das nicht zu Unrecht.

Philipp Tarasiewicz, Robin Böhm


AngularJS ist ein JavaScript-Framework für die Entwicklung von modernen clientseitigen Webanwendungen. Erstmalig halten bewährte Konzepte wie Dependency Injection und konsequente testgetriebene Entwicklung Einzug in die JavaScript-Welt und machen diese somit attraktiv für den Enterprise-Einsatz. Das Framework bietet hier einige sehr intuitive APIs und achtet in hohem Maße auf das Einhalten und Bilden von Schnittstellen.

In der letzten Ausgabe haben wir ein AngularJS-Projekt mit dem Namen Cube angelegt. Cube ist eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels, bei dem wir den X-, Y- und Z-Rotationsgrad steuern können (Abb. 1). Wir haben gelernt, dass wir mithilfe der Zwei-Wege-Datenbindung eine Ansicht ziemlich einfach automatisch aktualisieren können, wenn sich die zugrunde liegenden Daten geändert haben. Auch den umgekehrten Fall, also die automatische Aktualisierung der Datenschicht bei Änderungen in der Ansicht, deckt dieses Konzept ab. Daher kommt auch der Begriff der Zwei-Wege-Datenbindung.

Außerdem haben wir uns angeschaut, wie wir ein eigenes -Tag entwerfen können, das den gesamten HTML-Code und die Logik kapselt, die nötig ist, um einen dreidimensionalen Würfel darzustellen. Wir können einen solchen Würfel sehr einfach erzeugen, indem wir in einem Template unser -Tag verwenden:

In diesem Teil des Tutorials wollen wir uns weitere Konzepte von AngularJS anschauen, indem wir unser Cube-Projekt um einige Features erweitern. Zunächst werden wir einen Mechanismus implementieren, um dynamisch weitere Würfel erstellen und vorhandene Würfel wieder löschen zu können. Bisher lässt sich das nur zur Entwicklungszeit bewerkstelligen, indem wir in der index.html weitere -Tags einbauen bzw. vorhandene -Tags entfernen.

Weiterhin werden wir uns anschauen, welche Möglichkeiten uns das Framework bietet, um eine HTTP-basierte Schnittstelle anzusprechen. Hierzu werden wir das Flickr-API nutzen, um die sechs Seiten eines Würfels mit einem Hintergrundbild zu versehen.

Flickr bietet uns die Möglichkeit, unsere Fotos in der Cloud zu verwalten und mit anderen Menschen zu teilen. Öffentliche Fotos können von allen Besuchern durchsucht werden und über das Flickr-API abgerufen werden.

Abb. 1: Stand des Cube-Projekts aus dem ersten Teil

Controller und Scopes

Wir haben in der letzten Ausgabe...

Java Magazin
JavaScript für den Enterprise-Einsatz

Die Anwendung erwacht zum Leben

Kaum eine Konferenz oder Fachzeitschrift hat sich des Themas AngularJS noch nicht angenommen. Auch Schulungs- und Projektanfragen bestätigen: AngularJS ist in Deutschland angekommen! Und das nicht zu Unrecht.

Philipp Tarasiewicz, Robin Böhm


AngularJS ist ein JavaScript-Framework für die Entwicklung von modernen clientseitigen Webanwendungen. Erstmalig halten bewährte Konzepte wie Dependency Injection und konsequente testgetriebene Entwicklung Einzug in die JavaScript-Welt und machen diese somit attraktiv für den Enterprise-Einsatz. Das Framework bietet hier einige sehr intuitive APIs und achtet in hohem Maße auf das Einhalten und Bilden von Schnittstellen.

In der letzten Ausgabe haben wir ein AngularJS-Projekt mit dem Namen Cube angelegt. Cube ist eine einfache Anwendung zur Visualisierung eines dreidimensionalen Würfels, bei dem wir den X-, Y- und Z-Rotationsgrad steuern können (Abb. 1). Wir haben gelernt, dass wir mithilfe der Zwei-Wege-Datenbindung eine Ansicht ziemlich einfach automatisch aktualisieren können, wenn sich die zugrunde liegenden Daten geändert haben. Auch den umgekehrten Fall, also die automatische Aktualisierung der Datenschicht bei Änderungen in der Ansicht, deckt dieses Konzept ab. Daher kommt auch der Begriff der Zwei-Wege-Datenbindung.

Außerdem haben wir uns angeschaut, wie wir ein eigenes -Tag entwerfen können, das den gesamten HTML-Code und die Logik kapselt, die nötig ist, um einen dreidimensionalen Würfel darzustellen. Wir können einen solchen Würfel sehr einfach erzeugen, indem wir in einem Template unser -Tag verwenden:

In diesem Teil des Tutorials wollen wir uns weitere Konzepte von AngularJS anschauen, indem wir unser Cube-Projekt um einige Features erweitern. Zunächst werden wir einen Mechanismus implementieren, um dynamisch weitere Würfel erstellen und vorhandene Würfel wieder löschen zu können. Bisher lässt sich das nur zur Entwicklungszeit bewerkstelligen, indem wir in der index.html weitere -Tags einbauen bzw. vorhandene -Tags entfernen.

Weiterhin werden wir uns anschauen, welche Möglichkeiten uns das Framework bietet, um eine HTTP-basierte Schnittstelle anzusprechen. Hierzu werden wir das Flickr-API nutzen, um die sechs Seiten eines Würfels mit einem Hintergrundbild zu versehen.

Flickr bietet uns die Möglichkeit, unsere Fotos in der Cloud zu verwalten und mit anderen Menschen zu teilen. Öffentliche Fotos können von allen Besuchern durchsucht werden und über das Flickr-API abgerufen werden.

Abb. 1: Stand des Cube-Projekts aus dem ersten Teil

Controller und Scopes

Wir haben in der letzten Ausgabe...

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