Embed Size (px)
Citation preview
1
Wiederverwendbare Komponenten mit Angular 2.0
Deep Dive
Manfred Steyer
Über mich …
Manfred Steyer
Trainer & Berater
Fokus: Angular
Page 2
2
Ziele
Möglichkeiten zum Entwickeln eigener
Komponenten in Angular 2 kennen lernen
Fokus auf Konzepte
Nicht: Allgemeine Angular-2-Einführung
Page 3
Inhalt
Angular 2
Komponenten vs. Direktiven
Erste Schritte: Bindings
Kommunikation zwischen Direktiven
Life-Cycle-Hooks
Two-Way-Binding
Zusammenfassung
Page 4
3
Didaktik
Folien
Viel Live-Coding
Page 5
ANGULAR 2
Page 8
4
Was ist Angular 2
SPA-Framework
Moderne Apps
Nachfolger von
AngularJS
Große Community
BETAStabiler
Kern
Page 9
Direktiven und Komponenten
Page 14
•Verhalten für Elemente
•CSS-SelektorDirektiven
•Direktiven mit Template
•Kann weitere Direktiven und Komponenten nutzen
Komponenten
•Offener Standard
•Unterstützung durch Angular 2 geplant
Web-Components
5
DEMO-KOMPONENTE
Page 15
"Im Kleinen verstehen; im Großen
anwenden"
Page 16
[Robert Sedgewick]
6
Option-Box und Option-Item
Page 17
Option-Box
App-Component
App-Component
Page 19
<h1>{{title}}</h1>
[…]
<option-item[selected]="true"[value]="1"(change)="change($event)">
Per Express</option-item>
[…]
7
Option-Item (Controller)
Page 20
@Component({selector: 'option-item',templateUrl: 'option-item.html',styleUrls: ['app/option-item/option-item.css']
})export class OptionItem {
@Input() selected: boolean;@Input() value: string;@Output() change = new EventEmitter();select() { […] }
}
DEMO
Page 24
8
KOMMUNIKATION ZWISCHEN DIREKTIVEN
Page 25
Option-Box
Page 26
<option-box [value]="[…]">
<option-item […]>Per Express</option-item>
<option-item […]>Per Einschreiben</option-item>
</option-box>
9
Untergeordnete Komponenten abfragen
Page 27
@ContentChildren(OptionItem)items: QueryList<OptionItem>;
DEMO
Page 28
10
LIFECYCLE-HOOKS
Page 29
Lifecycle-Hooks (Auszug)
Page 30
OnInit ngOnInit
OnDestroy ngOnDestroy
OnChanges ngOnChanges
AfterContentInit ngAfterContentInit
11
DEMO
Page 32
TWO-WAY-BINDING
Page 33
12
Two-Way-Binding
Page 34
<option-box [value]="value"(valueChange)="setValue($event)">
[…]</option-box>
<option-box [(value)]="value">[…]</option-box>
<option-box [value]="value"(valueChange)="value = $event">
[…]</option-box>
DEMO
Page 35
13
Zusammenfassung
Property-Bindings
Event-Bindings
Two-Way-Binding =
Property- + Event-Binding + Syntax-Zucker
Content-Projection
Kommunikation mit ContentChildren
Life-Cycle-Hooks
SOFTWAREarchitekt.at
ManfredSteyer
Contact
