Angular 2 Intro from JAX 2016, Mainz

1. Angular 2.0
Manfred Steyer
ManfredSteyer

2. Über mich …
Manfred Steyer
Trainer & Berater
Fokus: Angular
Page  2

3. Ziel
Angular 2.0 und zugrundeliegende Konzepte
anhand eines Beispielprojektes kennen lernen
Page  5

4. Inhalt
Motivation
Angular 2 und Datenbindung
Services und DI
Pipes
Change-Tracking
Komponenten
Forms-Handling und Validierung
Routing

5. MOTIVATION
Page  8

6. Plattformen und Usability
HTML + JavaScript
Single Page Application

7. High-Level Architektur
Page  10
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)

8. Page  15
HTML + JavaScript => Komplexität

9. Page  16
HTML + JavaScript + jQuery => Komplexität

10. Page  17
Frameworks machen SPA beherrschbar

11. AngularJS
Page  19
Community Verbreitung
Eco-
System

12. Google Trends (Februar 2016)
Page  24

13. Job Trends (Indeed.com, Februar 2016)
Page  26

14. angular-connect, Herbst 2015, London
Folie 27

15. angular-connect, Herbst 2015, London
Folie 28

16. ANGULAR 2
Page  42

17. Was ist Angular 2
 Neuimplementierung
 Performance
 Komponenten
 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  43

18. Stand der Dinge
 BETA seit Dezember 2015
 Kern stabil!
 RC: Für Mai 2016 geplant
 Moving-Parts jenseits des Kerns
 Angular-2-Portierungen
 AdWords (Mios LOC, 100s Devs)
 Green Tea (Mios LOC, 100s Devs)
Page  44

19. Component Controller
Page  45
@Component({
selector: 'flug-suchen',
templateUrl: 'flug-suchen.html'
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}

20. Bindings
Page  46
<input [(ngModel)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ngFor="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.von}}</td>
<td>{{flug.zu}}</td>
<td><a href="#" (click)="selectFlight(flug)">Select</a></td>
</tr>
</table>

21. View
Page  47
<input bindon-ngModel="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ngFor: 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>

22. DEMO: ERSTE SCHRITTE
Page  50

23. DATENBINDUNG NÄHER
BETRACHTET
Page  83

24. Architektur-Ziele von Angular 2
Page  84
Performance Komponenten
Vorhersagbarkeit

25. Data-Binding in Angular 1.x
Page  85
Model Model Directive

26. Komponenten-Baum in Angular 2
Page  86
Komponente für App
Komponente (z. B. Liste)
Komponente
(z. B. Eintrag)
Komponente
(z. B. Eintrag)

27. 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  88

28. Property-Binding
Page  89
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

29. Weitere Performance-Verbesserungen
Page  91
Immutable
Data
Observables

30. Event-Bindings (One-Way, Bottom/Up)
Page  93
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler

31. Event-Bindings (One-Way, Bottom/Up)
Kein Digest um Events zu versenden
Aber: Events können Daten ändern 
Property Binding
Page  94

32. Property- und Event-Bindings
Page  96
Property-Binding
ausführen
Event-Handler
ausführen
Ereignis tritt ein
App ist bereit
Alle Handler ausgeführt
Properties gebunden

33. View
Page  99
<table [hidden]="flights.length == 0">
<tr *ngFor="#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>
<td [text-content]="flight.id"></td>

34. Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Binding + Event-Binding
Page  101

35. Property- und Event-Bindings
kombinieren
Page  102
<input [ngModel]="von"
(ngModelChange)="updateVon($event)">
updateVon(newValue) {
this.von = newValue;
}

36. Property- und Event-Bindings
kombinieren
Page  103
<input [ngModel]="von"
(ngModelChange)="von = $event">

37. Syntax-Zucker für 2-Way-Binding
Page  104
<input [(ngModel)]="von">
<input bindon-ngModel="von">

38. KOMPONENTEN MIT
BINDINGS
Page  108

39. Beispiel: flug-card
Page  110

40. Beispiel: flug-card in flug-suchen.html
Page  112
<div *ngFor="#f of fluege">
<flug-card [item]="f"
[selectedItem]="selectedFlug"
(selectedItemChange)="selectedFlug = $event">
</flug-card>
</div>

41. Beispiel: flug-card
@Component({
selector: 'flug-card',
templateUrl: 'app/flug-card/flug-card.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class FlugCard {
@Input('item') flug;
@Input() selectedItem;
@Output() selectedItemChange = new EventEmitter();
select() {
this.selectedItemChange.next(this.flug);
}
}

42. Template
<div style="padding:20px;"
[ngStyle]="{'background-color':
(selectedItem == flug) ?
'orange' : 'lightsteelblue' }" >
<h2>{{flug.abflugort}} - {{flug.zielort}}</h2>
<p>Flugnr. #{{flug.id}}</p>
<p>Datum: {{flug.datum.substr(0,10)}}</p>
<p>
<input
type="button"
value="Auswählen"
class="btn btn-default"
(click)="select()" />
</p>
</div>

43. Nutzung einer Komponente
Page  115
@Component({
selector: 'flug-suchen',
templateUrl: 'app/flug-suchen/flug-suchen.html',
directives: [FlugCard],
})
export class FlugSuchen {
[…]
}

44. Nutzung einer Komponente (global)
Page  116
var services = [
provide(PLATFORM_DIRECTIVES,
{useValue: FlugCard, multi: true})
];
bootstrap(App, services);

45. DEMO
Page  117

46. FORMS HANDLING
Page  119

47. 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
• An Community übergeben
Daten-
getrieben

48. Deklerative Formulare
Page  121
export class FlugSuchen {
von;
nach;
constructor(flugService: FlugService) {
von = 'Graz';
nach = 'Hamburg';
}
}

49. View
Page  122
<form #f="ngForm">
<input type="text" ngControl="von"
[(ngModel)]="von" required>
[…]
</form>
FormDirective
valid, dirty, …
Control
valid, dirty
controls
{ }
von

50. View
Page  123
<form #f="ngForm">
<input type="text" ngControl="von"
[(ngModel)]="von" required>
<div *ngIf="!f?.controls?.von?.valid">
…Error…
</div>
<div
*ngIf="f?.controls?.von?.hasError('required')">
…Error…
</div>
[…]
</form>
FormDirective
valid, dirty, …
Control
valid, dirty
controls
{ }
von

51. DEMO
Page  125

52. Imperative Formulare
export class FlugSuchen {
filter: ControlGroup;
constructor(flightService: FlightService, fb: FormBuilder) {
[…]
this.filter = fb.group({
von: ['Graz', Validators.required],
nach: ['Hamburg', Validators.required]
});
[…]
}
searchFlights() {
var filter = this.filter.value;
[…]
}
}

53. Imperative Formulare
Page  127
<form [ngFormModel]="filter">
<input id="from" ngControl="von" type="text">
<div *ngIf="!filter.controls.von.valid">…Error…</div>
[…]
</form>

54. DEMO
Page  128