Angular 2: Custom Components

14
1 Wiederverwendbare JavaScript-Komponenten mit Angular 2.0 Deep Dive Manfred Steyer Buch-Projekte Page 2

Transcript of Angular 2: Custom Components

1

Wiederverwendbare JavaScript-Komponenten mit Angular 2.0

Deep Dive

Manfred Steyer

Buch-Projekte

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

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

Technische Eigenschaften

Performance Komponenten TypeScript/ ES6

ModularisierungFlexibles

RenderingTestbarkeit

Datenbindung

Page 10

5

KOMPONENTEN VS. DIREKTIVEN

Page 11

Direktiven und Komponenten

Page 12

•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

6

DEMO-KOMPONENTE

Page 13

"Im Kleinen verstehen; im Großen

anwenden"

Page 14

[Robert Sedgewick]

7

Option-Box und Option-Item

Page 15

App-Component (View)

Page 17

<h1>{{title}}</h1>

[…]

<option-item[selected]="true"[value]="1"(change)="change($event)">

Per Express</option-item>

[…]

8

Option-Item (Controller)

Page 18

@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: EventEmitter = new EventEmitter();select() { […] }

}

DEMO

Page 22

9

KOMMUNIKATION ZWISCHEN DIREKTIVEN

Page 23

Option-Box

Page 24

<option-box [value]="[…]">

<option-item […]>Per Express</option-item>

<option-item […]>Per Einschreiben</option-item>

</option-box>

Content von option-box

10

Lifecycle-Hooks (Auszug)

Page 25

OnInit ngOnInit

OnDestroy ngOnDestroy

OnChanges ngOnChanges

AfterContentInit ngAfterContentInit

DEMO

Page 26

11

LIFECYCLE-HOOKS

Page 27

DEMO

Page 29

12

TWO-WAY-BINDING

Page 30

Syntax-Zucker

Page 31

<option-box [value]="value"(valueChange)="setValue($event)">

[…]</option-box>

<option-box [(value)]="value">[…]</option-box>

<option-box [value]="value"(valueChange)="value = $event">

[…]</option-box>

13

DEMO

Page 32

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-Projection

Kommunikation mit ContentChildren

Life-Cycle-Hooks

14

[email protected]

SOFTWAREarchitekt.at

ManfredSteyer

Contact