1
Angular 2.0: Moderne Anwendungen für
das Web von morgen und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic

2
Ziel
Angular 2.0 und zugrundeliegende Konzepte
anhand eines Beispielprojektes kennen lernen
Page  4
Didaktik
Kurze Präsentationen
Live-Coding
Fragen: Gerne jederzeit!
Page  5

3
Inhalt
 Motivation
 Überblick zu Angular 2
 DEMO
 Binding und Forms-Handling
 DEMO
 Routing
 DEMO
 Komponenten
 DEMO
 Migration
 Fazit
MOTIVATION
Page  7

4
Plattformen und Usability
HTML + JavaScript
Single Page Application
Page  15
HTML + JavaScript + jQuery => Komplexität

5
Page  16
Frameworks machen SPA beherrschbar
AngularJS
Page  17
Community Verbreitung
Eco-
System

6
HERAUSFORDERUNGEN IN
ANGULARJS 1.X
Page  36
Herausforderungen in AngularJS 1.x
Page  37
Performance Nachvollziehbarkeit Änderungsverfolgung
Use-Case:
Anwendungen
Zusammenspiel mit
anderen Bibliotheken

7
ANGULAR 2
Page  38
Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten (Web Components)
 TypeScript/ ES 6 (ES 5 möglich)
 Kompilierung nach ES 5
 Modularisierung
 Flexibles Rendering (auch: Web-Worker, Server)
 Spielt besser mit anderen Bibliotheken zusammen
Page  39

8
Component Controller
Page  40
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directives: [NgFor, NgIf]
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}
Kann künftig großteils
entfallen
View
Page  41
<input [(ng-model)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ng-for="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" (click)="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>

9
View
Page  42
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: var flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" on-click="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>
DEMO: ERSTE SCHRITTE
Page  45

10
BINDINGS NÄHER
BETRACHTET
Page  46
Architektur-Ziele von Angular 2
Page  47
Performance Komponenten
Vorhersagbarkeit

11
Data-Binding in Angular 1.x
Page  48
Model Model Directive
Komponenten-Baum in Angular 2
Page  49
Komponente für App
Komponente (z. B. Liste)
Komponente
(z. B. Eintrag)
Komponente
(z. B. Eintrag)

12
Regeln für Property-Bindings
 Eine Komponente hängt nur von ihren eigenen Daten
(und indirekt von denen des Parents) ab
 Eine Komponente hängt nicht von
Daten ihrer Kinder ab!
 Abhängigkeits-Graph ist ein Baum
 Angular benötigt nur einen Digest um Baum mit GUI
abzugleichen
Page  51
Property-Binding
Page  52
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

13
Weitere Performance-Verbesserungen
Page  54
Immutable
Data
Observables
Event-Bindings (One-Way, Bottom/Up)
Page  56
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler

14
Event-Bindings (One-Way, Bottom/Up)
Kein Digest um Events zu versenden
Aber: Events können Daten ändern 
Property Binding
Page  57
Property- und Event-Bindings
Page  59
Property-Binding
ausführen
Event-Handler
ausführen
Ereignis tritt ein
App ist bereit
Alle Handler ausgeführt
Properties gebunden

15
Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Binding + Event-Binding
Page  64
Property- und Event-Bindings
kombinieren
Page  65
<input [ng-model]="from" (ng-model)="updateFrom($event)">
updateFrom(newValue) {
this.from = newValue;
}

16
Property- und Event-Bindings
kombinieren
Page  66
<input [ng-model]="from" (ng-model)="from = $event">
Syntax-Zucker für 2-Way-Binding
Page  67
<input [(ng-model)]="from">
<input bindon-ng-model="from">

17
Types of Binding
Page  68
<input [(ng-model)]="from">
[…]
<table [hidden]="flights.length == 0">
<tr *ng-for="#flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.date}}</td>
<td>{{flight.from}}</td>
<td>{{flight.to}}</td>
<td><a href="#" (click)="selectFlight(flight)">Select</a></td>
</tr>
</table>
DEMO: USING NG-MODEL
Page  69

18
HANDLING FORMS
Page  71
Ansätze in Angular 2
• ng-model
• Wie in AngularJS 1.x
• Angular erzeugt „Forms-Controller“
Deklerativ
• Anwendung erzeugt „Forms-
Controller“
• Mehr Kontrolle
Imperativ
• Angular generiert Formular für
Datenmodell
• Noch nicht implementiert
Daten-
getrieben

19
Deklerative Formulare
Page  73
export class FlightList {
constructor(flightService: FlightService) {
[…]
this.filter = {
from: 'Graz',
to: 'Hamburg'
};
[…]
}
}
View
Page  74
<form #f="form">
<input type="text" ng-control="from"
[(ng-model)]="filter.from" required>
<div *ng-if="!f.controls.from.valid">
…Error…
</div>
<div
*ng-if="f.controls.from.hasError('required')">
…Error…
</div>
[…]
</form>
FormDirective
f
ControlGroup
form
Control
from

20
DEMO
Page  75
Imperative Formulare
export class FlightList {
filter: ControlGroup;
constructor(flightService: FlightService, fb: FormBuilder) {
[…]
this.filter = fb.group({
from: ['Graz', Validators.required],
to: ['Hamburg', Validators.required]
});
[…]
}
searchFlights() {
var filter = this.filter.value;
[…]
}
}

21
Imperative Formulare
Page  77
<form [ng-form-model]="filter">
<input id="from" ng-control="from" type="text">
<div *ng-if="!filter.controls.from.valid">…Error…</div>
[…]
</form>
ROUTING
Page  78

22
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seiten"
 Herausforderungen:
 URL-Parameter und Bookmarks
 Back-Button
 Eigene Datei pro logischer Seite --> Übersicht
Page  79
Routing unter AngularJS
 Logische Seiten erhalten eine URL, z. B:
 /FlugDemo#flugbuchen/passagier
 /FlugDemo#flugbuchen/flug
 Logische Seiten erhalten URL-Parameter, z. B.:
 /FlugDemo#flugbuchen/passagier/5
Page  80

23
Routing unter AngularJS
 SPA erhält Platzhalter
 Je nach URL wird in diesen Platzhalter ein Template
geladen
 #flugbuchen/passagier --> passagier.html
 #flugbuchen/flug --> flug.html
 Templates sind i.d.R. eigene Dateien
 Werden bei Bedarf nachgeladen
 Können auch in SPA inkludiert werden
Page  81
Routen (Zustände)
Routen sind Kombination aus u. a.:
Url (mit/ohne Platzhalter)
Template
Controller
Page  82

24
Routing unter AngularJS
Page  83
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter
Routing unter AngularJS
Page  84
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.html
/FlugDemo#flugbuchen/passagier

25
COMPONENT ROUTER
Page  85
Provider
ROUTER_PROVIDERS
provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page  86

26
AppComponent
Page  87
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
as: 'FlugSuchen' }
])
export class App {
}
View von AppComponent
Page  88
<a [router-link]="['/Home']">Home</a>
<div>
<router-outlet></router-outlet>
</div>

27
ROUTEN MIT PARAMETER
Page  89
Routen mit Parameter
Page  90
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
as: 'FlugSuchen' },
{ path: '/flug-edit/:id', component: FlugEdit,
as: 'FlugEdit' }
])
export class App {
}

28
Links auf Routen mit Parameter
Page  91
<a [router-link]="['/FlugEdit', {id: flug.id}]">Edit</a>
Route-Parameter auslesen
Page  92
@Component({})
@View({
templateUrl: 'app/components/flug-edit/flug-edit.html'
})
export class FlugEdit {
id;
constructor(params: RouteParams) {
this.id = params.get('id');
this.info = 'Flug: #' + this.id;
}
}

29
MIGRATION
Page  114
Migration
Page  116
Angular
1.x
Angular
2

30
Möglichkeiten
 Component Router: Parallelbetrieb
 Angular 1.5: Komponenten in Angular 1
 NgUpgrade: Angular 2 und Angular 1.x mixen
 NgForward: AngularJS 1.x im Angular-2-Stil
 Sinnvoll: Vorbereitung durch Einsatz von modernen
AngularJS 1.x-Code vorbereiten: EcmaScript 6,
TypeScript, Dekoratoren, Controller-As
Page  117
[https://github.com/angular/ngUpgrade]
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung mit Fokus auf
Performance, Komponenten und modernen Standards
 Parallelbetrieb, u. a. mit neuem Router
 Vorbereitung durch modernen Angular 1.x-Code,
Neuer Component Router, ES 6/ TypeScript
Page  123

31
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de