Weitere ähnliche Inhalte Ähnlich wie Angular 2: Custom Components (20) Mehr von Manfred Steyer (9) Angular 2: Custom Components2. 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
4. 4
Was ist Angular 2
SPA-
Framework
Moderne
Apps
Nachfolger
von
AngularJS
Große
Community
BETA
Stabiler
Kern
Page 9
Technische Eigenschaften
Performance Komponenten TypeScript/ ES6
Modularisierung
Flexibles
Rendering
Testbarkeit
Datenbindung
Page 10
5. 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
7. 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. 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. 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
12. 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. 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