Mit diesem Artikel startet meine Reihe zum Thema Angular-Entwicklung, in der ich die theoretischen Konzepte erläutern werde und anhand einer Beispielanwendung die Praxis näher beschreibe: Vom Aufsetzen eines Projektes über Codebeispiele bis hin zum Schreiben von Tests.

Die Statistiken belegen – Angular ist eines der beliebtesten JavaScript-Frameworks für Webanwendungen. Auch bei queo häufen sich die Projekte, in denen Angular zum Einsatz kommt. Insbesondere, wenn komplexe und hochdynamische Frontends gefordert sind.

Dabei wird Angular stetig weiterentwickelt. Die für diesen November angekündigte Version 5 möchte ich zum Anlass nehmen, um einen kleinen Überblick über die Versionen von Angular und die markantesten Veränderungen seit der Version 1.x geben.

Die Historie

AngularJS wurde 2009 als JS-Webframework zur Erstellung von Single-Page-Webanwendungen released. Während der Entwicklung der Version 2 wurde der Router nach anfänglichen Schwierigkeiten neu unter Version 3 entwickelt. Nach langem Warten war es dann aber am 14.09.2016 so weit und die finale Version 2 wurde veröffentlicht. Mit dem Wechsel auf Version 2 fand auch ein Wechsel des Frameworks von JavaScript zu TypeScript statt. Daraus resultierend wurde das JS aus dem Namen gestrichen. Um alle Paketversionen zu vereinheitlichen, wurde Dezember 2016 die Entscheidung getroffen, die Version 3 zu überspringen. Die Version 4 wurde daraufhin für März 2017 angekündigt und die für September angekündigte Version 5 soll im November 2017 veröffentlicht werden. Mit der Version 2 entschied sich das Entwicklerteam in einem festen Rhythmus von sechs Monaten einen Versionssprung mit neuen Features und Breaking Changes unter dem Projektnamen Angular zu veranlassen. Es wurde die Empfehlung ausgesprochen, Angular in der Version 1.x mit „AngularJS“ und ab Version 2 dann mit „Angular“ zu bezeichnen. Deshalb ist, wenn folgend von Angular die Rede ist, immer die aktuelle Version gemeint. Ist ein Feature erst ab einer bestimmten Version verfügbar oder auch nicht mehr verfügbar, wird dies gesondert erwähnt.

Die Entwicklung mit TypeScript

Angular entstand aus der Zusammenarbeit von zahlreichen Entwicklern bei Google und wird als Open-Source-Software angeboten. Im Gegensatz zu AngularJS handelt es sich bei Angular um ein TypeScript-basiertes Front-End-Webapplikationsframework. Es ist somit von Grund auf neu und mit TypeScript geschrieben worden. TypeScript unterstützt die Spezifikation ES2015 und bereits Teile der ES2016, wie zum Beispiel Dekoratoren, die in Angular vielfach verwendet werden. Aufgrund der Verwendung von Features, die noch nicht von allen Browsern unterstützt werden, ist es nötig, Polyfills für diese zu verwenden. Eine Liste hierzu findet man hier.

Die Vorteile von TypeScript

Ein entscheidender Vorteil von TypeScript, der sich bereits in einigen großen Projekten bewährt hat, ist das statische Typensystem. Es ermöglicht schon während der Entwicklung Fehler zu vermeiden und macht durch die Erstellung eigener Typen mittels Interfaces den Quellcode lesbarer. Obendrein lässt sich der Vorteil der automatischen Code-Vervollständigung in modernen IDEs nicht von der Hand weisen. Mit dem hauseigenen Language Service wird weiter ein nettes Hilfsmittel vom Angular-Team zur Verfügung gestellt, der wie der TSC (TypeScript Compiler) das Prüfen von Typen und Autovervollständigung innerhalb von inline wie externen Templates ermöglicht. Plugins hierfür stehen für die gängigen IDEs (VSCode, Sublime und Webstorm) zur Verfügung.

Die wichtigsten Bausteine in Angular

Basis einer jeden Angular-Anwendung sind Module, Komponenten, Direktiven, Pipes (ehemals Filter) und Services. Diese Elemente sind einfache Klassen, die mit bereitgestellten Dekoratoren um Metadaten ergänzt werden. Diese Metadaten bestimmen, auf welche Weise ein spezielles Element verarbeitet, instanziert und zur Laufzeit verwendet wird. Eine Angular-Anwendung besteht immer aus mindestens einem Modul und einer Komponente. Komponenten bilden die Basis des User Interface und sind immer Teil eines Moduls. In der Definition einer Komponente muss mindestens ein selector, der das HTML-Tag bestimmt, sowie ein Template in Form eines Templatestrings oder eine templateUrl angegeben werden. Templates enthalten reguläres HTML, welches durch spezifische Angular-Syntax ergänzt wird. Die Angabe von CSS-Stilen oder auch Referenzen zu separaten CSS-Dateien ist dabei optional. Da einige Konzepte übernommen wurden und somit gleich geblieben sind, gibt es die Möglichkeit der Migration von AngularJS Anwendungen zu Angular oder auch den eines hybriden Einsatzes. Erwähnenswert ist auch, dass das das Framework das MVVM Pattern implementiert. Das erleichertet die Trennung von Präsentation und Logik, nimmt viel Arbeit in der Entwicklung ab und macht es sehr dynamisch, da das Model eventbasiert in die View übergeben wird.