Angular 2 Slides

Angular 2.0
Manfred Steyer
ManfredSteyer

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

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

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

Plattformen und Usability
HTML + JavaScript
Single Page Application

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

Page  15
HTML + JavaScript => Komplexität

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

Page  17
Frameworks machen SPA beherrschbar

AngularJS
Page  19
Community Verbreitung
Eco-
System

Google Trends (Februar 2016)
Page  24

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

angular-connect, Herbst 2015, London
Folie 27

angular-connect, Herbst 2015, London
Folie 28

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

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

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) { [...] }
}

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>

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>

DEMO: ERSTE SCHRITTE
Page  50

DATENBINDUNG NÄHER
BETRACHTET
Page  83

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

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

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

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

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

Weitere Performance-Verbesserungen
Page  91
Immutable
Data
Observables

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

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

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

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>

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

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

kombinieren
Page  103
<input [ngModel]="von"
(ngModelChange)="von = $event">

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

KOMPONENTEN MIT
BINDINGS
Page  108

Beispiel: flug-card
Page  110

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>

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);
}
}

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>

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

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

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

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

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

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

Imperative Formulare
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;
[…]
}
}

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

Angular 2 Slides

Weitere ähnliche Inhalte

Was ist angesagt? (12)

Andere mochten auch (16)

Ähnlich wie Angular 2 Slides (20)

Mehr von Manfred Steyer (19)

Angular 2 Slides