Shows how to write own components with Angular 2

1. 1
Wiederverwendbare
JavaScript-Komponenten mit Angular 2.0
Deep Dive
Manfred Steyer
ManfredSteyer
Side-Projects
Page  2
www.software-engineering-leadership.de

2. 2
Ziele
Möglichkeiten zum Schreiben von
Komponenten in Angular 2 kennen lernen
Fokus auf Konzepte
Syntax kann sich noch ändern
Nicht: Allgemeine Angular-2-Einführung
Page  3
Inhalt
Angular 2
Erste Schritte: Bindings
Kommunikation zwischen Direktiven
Life-Cycle-Methoden
Two-Way-Binding
Mit Host-Element kommunizieren
Zusammenfassung
Page  4

3. 3
Didaktik
Folien
Viel Live-Coding
Page  5
ANGULAR 2
Page  38

4. 4
Was ist Angular 2
SPA-
Framework
Moderne
Apps
Nachfolger
von
AngularJS
Große
Community
Noch Alpha
Page  39
Technische Eigenschaften
Performance Komponenten TypeScript/ ES6
Modularisierung
Flexibles
Rendering
Testbarkeit
Datenbindung
Page  40

5. 5
ERSTE SCHRITTE MIT
KOMPONENTEN
Page  41
Direktiven und Komponenten
Page  42
• Verhalten für
Elemente
• CSS-Selektor
Direktiven
• Direktiven mit
TemplateKomponenten
• Offener Standard
• Unterstützung durch
Angular 2 geplant
Web-
Components

6. 6
Option-Box und Option-Item
Page  43
App-Component (Controller)
Page  44
@Component({
selector: 'my-app'
})
@View({
templateUrl: 'app.html',
directives: [OptionItem]
})
class AppComponent {
title: string;
constructor() {
this.title = 'Component-Demo';
}
change(event, info) {
console.log('change!');
}
}

7. 7
App-Component (View)
Page  45
<h1>{{title}}</h1>
[…]
<option-item #i1
[selected]="true"
[value]="1"
(change)="change($event, i1.selected)">
Per Express
</option-item>
[…]
Option-Item (Controller)
Page  46
@Component({
selector: 'option-item',
properties: ['selected', 'value'],
events: ['change']
})
@View({
templateUrl: 'option-item.html',
directives: [NgIf]
})
export class OptionItem {
selected: boolean;
value: string;
change: EventEmitter = new EventEmitter();
select() { […] }
[…]
}

8. 8
Option-Item (View)
Page  47
<div
[class.itemOn]="selected"
[class.itemOff]="!selected"
(^click)="select()">
<ng-content></ng-content>
<span *ng-if="selected">*</span>
</div>
<option-item #i1
[selected]="true"
[value]="1"
(change)="change($event, i1.selected)">
Per Express
</option-item>
DEMO
Page  48

9. 9
KOMMUNIKATION
ZWISCHEN DIREKTIVEN
Page  49
Option-Box
Page  50
<option-box>
<option-item […]>Per Express</option-item>
<option-item […]>Per Einschreiben</option-item>
</option-box>
constructor(@Optional @Anchestor optionBox: OptionBox) {
[…]
}

10. 10
DEMO
Page  51
LIFE-CYCLE-METHODEN
Page  52

11. 11
Life-Cycle-Methoden
onInit
onCheck
onChange
onAllChangesDone
onDestroy
Page  53
Registrieren
Page  54
@Component({
[…]
lifecycle: [LifecycleEvent.onChange]
})
@View({
[…]
})
export class OptionItem {
onChange() {
[…]
}
}

12. 12
DEMO
Page  55
TWO-WAY-BINDING
Page  56

13. 13
Syntax-Zucker
Page  57
<option-box [value]="value" (value)="setValue($event)">
[…]
</option-box>
<option-box [(value)]="value">
[…]
</option-box>
<option-box [value]="value" (value)="value = $event">
[…]
</option-box>
DEMO
Page  58

14. 14
MIT HOST-ELEMENT
KOMMUNIZIEREN
Page  59
ElementRef und @Attribute
Page  60
constructor(
elm: ElementRef,
@Attribute('round') round: string) {
[…]
}

15. 15
ElementRef und @Attribute
Page  61
constructor(
elm: ElementRef,
@Attribute('round') round: string) {
if (round == 'true') {
elm.nativeElement
.firstElementChild
.style
.borderRadius = "5px";
}
}
DEMO
Page  62

16. 16
Zusammenfassung
 Angular 2 ist komponenten-orientiert
 ES6-Klassen, IntelliSense/Typing mit TypeScript
 Property-Bindings
 Event-Bindings
 Two-Way-Binding =
Property- + Event-Binding + Syntax-Zucker
 Content-Reprojection
 Referenz auf Ancester und Host-Element
 Life-Cycle-Events
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de