© Excellent backgrounds/Shutterstock.com
AngularJS und TypeScript

Der Beginn einer wunderbaren Freundschaft …


AngularJS ist ein beliebtes JavaScript-Framework von Google, das Direktiven, Data Binding, MV* und vieles mehr bietet. AngularJS ist auch deswegen beliebt, weil es bekannte Paradigmen wie Dependency Injection bietet und man dadurch sehr gut testgetrieben entwickeln kann. Allerdings gibt es verschiedene grundsätzliche Probleme mit der Entwicklung von großen strukturierten Anwendungen in JavaScript. Hier hilft TypeScript. TypeScript ist eine JavaScript-Erweiterung von Microsoft, die JavaScript um optionale statische Typprüfung, Interfaces, Klassen, Module und vieles mehr erweitert. In diesem Artikel werden einige Grundlagen von AngularJS 1.x erklärt und beschrieben, wie man AngularJS wunderbar zusammen mit TypeScript verwenden kann. Am Ende des Artikels gibt es noch eine kurze Preview auf die aktuelle Alphaversion von ­AngularJS 2.0, die ja bekannterweise auch in TypeScript entwickeln wird.

Ich beschäftige mich seit knapp fünfzehn Jahren mit UI-Technologien und habe viele Erfahrungen mit Rich-Client-Plattformen gesammelt. Seit einigen Jahren sehe ich einen Trend, dass viele UIs, die früher ganz klar mit nativen Rich-Client-Plattformen entwickelt wurden, zunehmend mit Webtechnologie realisiert werden. Das liegt zum einen daran, dass mit HTML5 und CSS3 sehr attraktive UIs mit einer guten Usability gestaltet werden können, zum anderen aber auch daran, dass JavaScript in den letzten Jahren einen wirklich enormen Performance-Boost bekommen hat. Mittlerweile läuft JavaScript in allen gängigen Browsern recht flott.

Aus der Rich-Client-Entwicklung sind Patterns wie MVC (Model/View/Controller), MVP (Model View Presenter, in den Ausprägungen Passive View und Supervising Controller), MVVM (Model View ViewModel) schon seit vielen Jahren bekannt. Im JavaScript-Bereich sind in den letzten Jahren auch viele Bibliotheken und Frameworks entstanden, die diese Patterns implementieren und Vorgaben bezüglich Architektur und Struktur machen. Dabei sind viele Bibliotheken auf so genannte Single Page Applications (SPA) ausgelegt, also Webapplikationen, die im Prinzip nur aus einer einzigen (parametrisierten) Webseite bestehen. Prominente Beispiele für JavaScript-Frameworks im MV*-Umfeld sind Ember [1], Backbone.js [2] oder auch Facebooks React [3], das eher das V von MVC realisiert, und natürlich AngularJS, auf das ich in diesem Artikel ausführlich eingehe.

Warum AngularJS?

Ich kenne viele (größere) Firmen, die eine ganze Reihe von JavaScript-Bibliotheken nach verschiedenen Gesichtspunkten und Anforderungen evaluiert haben. Einer der Kandidaten war dabei meistens AngularJS, das viele der Evaluierungen dann letztendlich empfohlen. Das bedeutet natürlich nicht, dass die anderen Bibliotheken schlecht(er) sind, ganz im Gegenteil, jede Bibliothek hat ihren Charme und auf jeden Fall eine Daseinsberechtigung. Bei der Evaluierung spielen verschiedene Dinge eine große Rolle:

  • Einfachheit vs. Komplexität / Mächtigkeit

  • Testbarkeit

  • Lernkurve

  • Adaption der aus dem Enterprise-Bereich bekannten Paradigmen

  • Adaption von großen Playern

Hier kann AngularJS punkten: Die Lernkurve ist recht steil, man kann schnell Dinge realisieren, ohne sehr tief in die DOM-Manipulation mittels JavaScript einsteigen zu müssen. AngularJS unterstützt Dependency Injection (DI), dadurch ist es recht einfach, Unit Tests zu schreiben, bei denen die injizierten Abhängigkeiten gemockt werden können. In Sachen Einfachheit gibt es bei AngularJS 1.0 durchaus Potenzial, so ist z. B. AngularJS 2.0 im Vergleich zu AngularJS 1.0 deutlich einfacher, doch dazu am Ende dieses Artikels mehr. Hier noch eine nette Anekdote zum Thema MV*. Es gab viele Diskussionen, ob denn AngularJS eher MVVM oder MVC oder etwas Ähnliches unterstützt. Am Ende kam heraus: AngularJS ist ein MVW-Framework, wobei das W für Whatever steht. Damit hatten dann die Diskussionen ein Ende. Auf jeden Fall kommen Entwickler mit verschiedenartigem Background recht gut mit den durch AngularJS bereitgestellten Paradigmen klar. Auch, dass AngularJS von Google entwickelt wird, dort intern in vielen Applikationen eingesetzt wird, zählt oft als Pluspunkt. Das Gleiche gilt auch für die Aktivität der Community. Für mich persönlich war einer der wenigen Wermutstropfen die Schwächen von JavaScript, wenn es um sehr große Codebasen geht. Meine Erfahrungen mit den Rich-Clients haben gezeigt, dass die Komplexität der Präsentationslogik und die Anbindung von Services nicht zu unterschätzen ist. Aber hier kam „TypeScript for the Rescue“. In meinem Java-Magazin-Artikel [4] habe ich ausführlich über die Grundlagen von TypeScript berichtet, in diesem Artikel werde ich darauf eingehen, wie man Type­Script auch hervorragend zusammen mit AngularJS verbinden kann. Im Anschluss möchte ich die Grundlagen von AngularJS kurz vorstellen, dabei kann ich natürlich aus Platzgründen nicht zu tief in die Details gehen und werde auch nur auf ausgewählte Teile von AngularJS eingehen. Sie sollten aber einen guten Überblick bekommen und dann in der Lage sein, schnell selbst zu starten.

Hello AngularJS

Listing 1 zeigt eine einfache AngularJS-Anwendung, quasi das „Hello, World“ in AngularJS. Hier wird ohne eine Zeile JavaScript dynamisch ein Input evaluiert und das Ergebnis ausgegeben. Die folgenden Beispiele finden Sie auch in meinem Web-App-Tutorial in Lab 4 [5].

Listing 1

<!doctype html> <html ng-app> <body> <div> <label>Name:</label> <input type="text" ng-model="yo...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang