JavaScript-Steuerelemente mit Angular: Fallstudie mit Live-Coding

Slides from Session at JAX 2017, Mainz, Germany

Transcript

1. JavaScript-Steuerelemente mit Angular Fallstudie mit (viel) Live-Coding Manfred Steyer SOFTWAREarchitekt.at
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Ziel Einen Teil von Angular, nämlich Komponenten, anhand eines Fallbeispiels (näher) kennen lernen.
4. Inhalt • Kurzer Überblick zu Angular • Property Binding • Content Projection • Kommunikation mit Kind-Komponenten • Events und Event Bindings • Two Way Bindings
5. Angular 101
6. Anwendung == Kompontentenbaum Page ▪ 7
7. Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app', templateUrl: './app.component.html', }) export class AppComponent { title: string = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
8. Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app', templateUrl: './app.component.html', }) export class AppComponent { title: string = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
9. Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app', templateUrl: './app.component.html', }) export class AppComponent { title = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
10. Komponente import { Component } from '@angular/core'; @Component({ selector: 'flight-app', templateUrl: './app.component.html', }) export class AppComponent { title = 'App works!'; doStuff(): void { this.title = 'Stuff done!'; } }
11. Module Page ▪ 12 Module X Module Y AppModule AppComponent … … … import import
12. Projektsetup
13. Fallstudie
14. “Im Kleinen verstehen; im Großen anwenden” [Robert Sedgewick]
15. Tabbed Pane TabbedPaneComponent TabComponent
16. Anwendung <tabbed-pane [selected]="selectedIndex"> <tab [title]="'Offene Rechnungen'"> […] </tab> <tab [title]="'Bezahlte Rechnungen'"> […] </tab> </tabbed-pane>
17. Anwendung <tabbed-pane [selected]="selectedIndex"> <tab [title]="'Offene Rechnungen'"> […] </tab> <tab [title]="'Bezahlte Rechnungen'"> […] </tab> </tabbed-pane>
18. Anwendung <tabbed-pane [selected]="selectedIndex"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
19. DEMO
20. Zugriff auf Kind-Komponenten
21. Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
22. Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChild(TabComponent) tab: TabComponent;
23. Content abfragen @ContentChildren(TabComponent) tabs: QueryList<TabComponent>; @ContentChild(TabComponent) tab: TabComponent; @ContentChild('handle') tabWithHandle: TabComponent; // <tab #handle>…</tab>
24. Lifecycle-Hooks (Auswahl) OnInit OnChanges OnDestroy AfterContent Init AfterContent Checked
25. DEMO
26. Event-Bindings
27. Anwendung <tabbed-pane [selected]="selectedIndex" (selectedChange)="selectedIndex = $event"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
28. Anwendung <tabbed-pane [selected]="selectedIndex" (selectedChange)="selectedIndex = $event"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
29. Anwendung <tabbed-pane [(selected)]="selectedIndex"> <tab title="Offene Rechnungen"> […] </tab> <tab title="Bezahlte Rechnungen"> […] </tab> </tabbed-pane>
30. DEMO
31. Zusammenfassung Komponentenbaum Content Projection Input und Output Content Children Live Cycle Hooks Two Way Binding
32. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer