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

3

Didaktik

Folien

Viel Live-Coding

Page 5

ANGULAR 2

Page 38

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) {

[…]

}

10

DEMO

Page 51

LIFE-CYCLE-METHODEN

Page 52

11

Life-Cycle-Methoden

onInit

onCheck

onChange

onAllChangesDone

onDestroy

Page 53

Registrieren

Page 54

@Component({[…]lifecycle: [LifecycleEvent.onChange]

})@View({

[…] })export class OptionItem {

onChange() {[…]

}

}

12

DEMO

Page 55

TWO-WAY-BINDING

Page 56

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] manfred.steyer@softwarearchitekt.at

[blog] www.softwarearchitekt.at

[twitter] ManfredSteyer

Kontakt

www.software-engineering-leadership.de