1
Wiederverwendbare JavaScript-Komponenten mit Angular 2.0
Deep Dive
Manfred Steyer
ManfredSteyer
Side-Projects
Page 2
www.software-engineering-leadership.de
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
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
ModularisierungFlexibles
RenderingTestbarkeit
Datenbindung
Page 40
5
ERSTE SCHRITTE MIT KOMPONENTEN
Page 41
Direktiven und Komponenten
Page 42
•Verhalten für Elemente
•CSS-SelektorDirektiven
•Direktiven mit TemplateKomponenten
•Offener Standard
•Unterstützung durch Angular 2 geplant
Web-Components
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
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
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
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) {
[…]
}
11
Life-Cycle-Methoden
onInit
onCheck
onChange
onAllChangesDone
onDestroy
Page 53
Registrieren
Page 54
@Component({[…]lifecycle: [LifecycleEvent.onChange]
})@View({
[…] })export class OptionItem {
onChange() {[…]
}
}
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
MIT HOST-ELEMENT KOMMUNIZIEREN
Page 59
ElementRef und @Attribute
Page 60
constructor(elm: ElementRef, @Attribute('round') round: string) {
[…]
}
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
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] [email protected]
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de