Angular ist eines der derzeit am meisten verwendeten Frameworks für Single-Page-Applications. Zurecht, vereint es doch viele bereits seit Jahren in der Native-Richt-Client Entwicklung etablierte Techniken wie Dependency Injection und Data-Binding. Doch auch Angular hat seine Schwächen und eine steile Lernkurve wie Philipp Burgmer (w11k GmbH) in seiner Session „Angular 2: Getting Started“ erläuterte.

Neben Neuerungen von dynamischem Nachladen von Code, dem Server-Side-Rendering ist in Version 2 auch der Einsatz von alternativem Rendering möglich, bspw. NativeScript.

Voraussetzungen für den Einsatz von Angular 2:
– ES6 Modul System
– Reactive Programming
– Verwendung von TypeScript
– Build-System

Die Hürden sind also nicht so hoch, denn vieles davon kennt man schon, wenn man Angular 1 genutzt hat.

© S&S Media

Build-System:
– mit Angular CLI wird ein vorgefertigtes Build-System zur Verfügung gestellt, speziell auf Angular 2 ausgelegt

TypeScript:
– ermöglicht die Nutzung neuerer, moderner ES 6/7 per Transpiler (Klassen, Module, Decorator),  Typen (besseres Tooling, weniger Fehler erst zur Laufzeit, Typisierung von Backend API möglich); TypeScript ist kein Muss, aber sehr sinnvoll!

Asynchrone und reaktive Programmierung:
– Welche Eigenschaften hat x?
– sofort/später verfügbar (synchro/asynchron)
– mehrere Werte (verzögert verfügbar) / ein Wert (einmaliges Ergebnis)
– Das Problem mit Promises: eine Promise kann genau 1x aufgelöst werden. Die Lösung in Angular 2: Observable

Konzepte von Angular 2 im Fokus

Komponenten:
– grundlegendes Architekturkonzept von Angular 2
– gesamtes UI ist als Baum von Komponenten aufgebaut
– Komponenten werden im TypeScript-Code definiert
– Komponenten werden im HTML verwendet (Verwendung muss genau Selektor entsprechen)
– Template nicht statisch, sondern dynamisch
– Instanz von Klasse stellt Daten bereit
– dumme Komponenten
– smarte Komponenten (kennen ihre Umgebung, für Datenbeschaffung und -verarbeitung zuständig, geben Daten an dumme Komponenten weiter)

Module:
– Angular-spezifischer Code muss organisiert werden
– Kapselung & Wiederverwendbarkeit
– leichtes Einbinden von Bibliotheken
– genaue Steuerung was wo verwendet wird
==> Kompromiss!

Darüber hinaus ging Philipp Burmer natürlich auch noch aus Aspekte wie Data Bindings, Property Bindings, Event Bindings, Komponenten Outputs, Class- und Style-Bindings, Services, Dependency Injection und vieles mehr ein. Ebenso auf die Konfiguration einer Angular-2-Anwendung (mit Shortcuts, Provider-Objekten, etc.), auf hierarchische Injektoren, Formulare und Validierung, Model-Driven im Controller, Fehlermeldungen und natürlich Routing/Navigation!

Gesamte #UI ist aus einem Baum von Komponenten aufgebaut: #Angular2 getting started! @philippburgmer #wtc16 #ipc16 pic.twitter.com/6aocSvLv31

— WebTech Conference (@WebTechCon) 24. Oktober 2016