Angular 2 Workshop at w-jax 2016, Munich, November 2016

Moderne Web-Anwendungen mit Angular 2.0 Manfred Steyer ManfredSteyer

Über mich …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer
& Consultant  GDE & MVP  Focus: Angular 2 Page  2 ManfredSteyer

Ziel Angular 2.0 und zugrundeliegende Konzepte anhand eines Beispielprojektes kennen
lernen Page  5

Didaktik Präsentationen Live-Coding Fragen: Gerne jederzeit! Page  6

Inhalt Motivation Überblick zu Angular 2 Services und DI Pipes
Change-Tracking Komponenten Routing

MOTIVATION Page  8

Plattformen und Usability HTML + JavaScript Single Page Application

High-Level Architektur Page  10 Services HTML/ JavaScript-Client HTTP Single
Page Application (SPA)

Angular 1 1.1 Million Developers

angular-connect, Herbst 2015, London Folie 28

angular-connect, Herbst 2015, London Folie 29

ANGULAR 2 Page  30

Was ist Angular 2? Page  32 Performance Komponenten Modern
Web Flexibler Renderer

TypeScript ES 6 Sprachen Page  35 ES 5 Kompilierung

EINE ERSTE KOMPONENTE Page  44

Component Controller Page  45 @Component({ selector: 'flug-suchen', templateUrl: 'flug-suchen.html'
}) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(http: Http) { } search() { [...] } select(flug) { [...] } }

Template Page  46 <input [(ngModel)]="von"> <input [(ngModel)]="nach"> <button [disabled]="!von
|| !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table>

Template Page  47 <input bindon-ngModel="von"> <input bindon-ngModel="nach"> <button bind-disabled="!von
|| !nach" on-click="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table>

Anwendung == Kompontentenbaum Page  48 Root-Component

Anwendung == Kompontentenbaum Page  49 AppComponent FlugSuchen- Component Root-Component

AppComponent Page  50 @Component({ selector: 'flug-app', template: 'app/app.component.html' })
export class AppComponent { }

AppComponent Page  51 <nav class="navbar navbar-default navbar-fixed-top">  </nav> <div class="container"> <flug-suchen></flug-suchen> </div>

Module Page  52 Module X Module Y AppModule AppComponent
FlugSuchenComponent … … import import Root-Component (AppComponent)

AppModule Page  53 @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule
], declarations: [ AppComponent, FlugSuchenComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Bootstrapping  Angular 2 starten  RootModule mit RootComponent bekannt
geben Page  54

Bootstrapping Page  55 platformBrowserDynamic().bootstrapModule(AppModule);

index.html Page  56 <body> <flug-app></flug-app> <script src="..."></script> </body>

DEMO Page  57

PROJEKTSETUP FÜR DEMO-PROJEKT Page  69

Möglichkeiten für Projektstart Page  70 • Aufwändig • Viele
Freiheiten Manuell • cli.angular.io • Einfach • Weniger Freiheiten CLI • Einfach • Viele Freiheiten Seed- Projekte

Basis für unser Beispiel Basiert auf offiziellem Angular-2-Seed-Projekt von Github
Page  71

Dateien und Ordner Page  72 • Quellcode (TypeScript) app
• Kompilate dist • Bibliotheken node_modules • Typdeklarationen für TypeScript typings • Verweis auf Bibliotheken und Skripte package.json • Verweis auf Typdeklarationen typings.json • Konfiguration für TypeScript-Compiler tsconfig.json • Konfiguration für Bundler (webpack) webpack.config.js • Startdatei index.html

Webpack Page  73 File A File B File C
File D File E Entry Point Bundle Bundle Loader (z.B. .ts  .js)

package.json Page  74 { "dependencies": { "@angular/common": "2.0.0-rc.1", […]
}, "devDependencies": { "typings": "^0.7.9", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0", […] }, […] }

}, "devDependencies": { "typings": "^0.7.9", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0", […] }, "scripts": { "postinstall": "typings install", "webpack": "webpack", "start": "webpack-dev-server", }, […] }

}, "devDependencies": { "typings": "^0.7.9", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0", […] }, "scripts": { "postinstall": "typings install", "webpack": "webpack" "start": "webpack-dev-server", }, […] }

}, "devDependencies": { "typings": "^0.7.9", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0", […] }, "scripts": { "postinstall": "typings install", "webpack": "webpack" "start": "webpack-dev-server", }, […] } npm install npm start npm run webpack

DEMO Page  78

SERVICES UND DEPENDENCY INJECTION Page  83

Was sind Services Wiederverwendbare Codeeinheiten Meist Klassen Beispiel: FlugService Page
 84

Constructor Injection Page  85 @Component({ selector: 'flug-suchen', templateUrl: 'flug-suchen.html'
}) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(flugService: FlugService) { } flugSuchen() { [...] } selectFlug(flug) { [...] } }

Service Page  87 @Injectable() export class FlugService { […]
} Services sind Singletons (in ihrem "Scope")

Funktionsweise  Provider bindet Services an Token  Andere Services
und Komponenten fordern für Token eine Implementierung an Page  88

Token  Fast alles kann ein Token sein!  Häufig:
Standard-Implementierung des Services  Abstrakte (Basis)-Klasse  Konstante  NICHT: Interface Page  89

Service an Token binden (global) Page  94 @NgModule({ imports:
[ BrowserModule, HttpModule, FormsModule ], declarations: [ AppComponent, FlugSuchenComponent ], providers: [ { provide: FlugService, useClass: AdvancedFlugService } ], bootstrap: [ AppComponent ] }) export class AppModule { }

[ BrowserModule, HttpModule, FormsModule ], declarations: [ AppComponent, FlugSuchenComponent ], providers: [ { provide: FlugService, useClass: FlugService } ], bootstrap: [ AppComponent ] }) export class AppModule { } Modul richtet Provider global ein!

[ BrowserModule, HttpModule, FormsModule ], declarations: [ AppComponent, FlugSuchenComponent ], providers: [ FlugService ], bootstrap: [ AppComponent ] }) export class AppModule { }

Service an Token binden (pro Komponente) Page  97 @Component({
selector: 'flug-suchen', templateUrl: 'app/flug-buchen/flug-buchen.html', providers: [{ provide: FlugService, useClass: FlugService}] }) export class FlugSuchenComponent { […] } Gilt nur für aktuelle Komponente und darunter!

Service an Token binden (pro Komponente) Page  98 @Component({
selector: 'flug-suchen', templateUrl: 'app/flug-buchen/flug-buchen.html', providers: [FlugService] }) export class FlugSuchenComponent { […] }

Arten von Bindungen Page  99 useClass useValue useFactory useExisting
multi

Service anfordern Page  100 @Component({ selector: 'flug-suchen', templateUrl: 'flug-suchen.html',
}) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(flugService: FlugService) { } flugSuchen() { [...] } selectFlug(flug) { [...] } } Angefordertes Token

Service anfordern Page  101 @Component({ selector: 'flug-suchen', templateUrl: 'flug-suchen.html'
}) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(@Inject(FlugService) flugService) { } flugSuchen() { [...] } selectFlug(flug) { [...] } }

DEMO Page  102

PIPES Page  105

Idee  Daten im Zuge der Bindung transformieren ("formatieren") 
Grammatik:  {{ f.von | ort }}  {{ f.von | ort:'short' }}  {{ f.von | ort:'short':'en' }}  {{ f.von | ort:'short':'en' | uppercase }} Page  106

Build-in Pipes Page  107 DatePipe UpperCasePipe LowerCasePipe DecimalPipe CurrencyPipe
PercentPipe JsonPipe

Pure Pipes  Ausgabe hängt nur von Eingabeparametern ab 
Konsequenz: Performanceoptimierungen möglich Page  108

Deklaration einer Pipe Page  109 import {Pipe} from '@angular/core';
@Pipe({ name: 'ort', pure: true }) export class OrtPipe implements PipeTransform { transform(value: any, ...args: Array<any>): any { […] return […]; } }

AppModule Page  110 @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule
], declarations: [ AppComponent, FlugSuchenComponent, OrtPipe ], bootstrap: [ AppComponent ] }) export class AppModule { }

DEMO Page  111

DATENBINDUNG NÄHER BETRACHTET Page  112

Architektur-Ziele von Angular 2 Page  113 Performance Komponenten Vorhersagbarkeit

Data-Binding in Angular 1.x Page  114 Model Model Directive

Komponenten-Baum in Angular 2 Page  115 Komponente für App
Komponente (z. B. Liste) Komponente (z. B. Eintrag) Komponente (z. B. Eintrag)

Regeln für Property-Bindings  Eine Komponente hängt nur von ihren
eigenen Daten (und indirekt von denen des Parents) ab  Eine Komponente hängt nicht von Daten ihrer Kinder ab!  Abhängigkeits-Graph ist ein Baum  Angular benötigt nur einen Digest um Baum mit GUI abzugleichen Page  117

Property-Binding Page  118 model item item {{ item.title }}
{{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

Event-Bindings (One-Way, Bottom/Up) Page  123 {{ item.title }} {{
item.title }} Event-Handler Event-Handler

Event-Bindings (One-Way, Bottom/Up) Kein Digest um Events zu versenden Aber:
Events können Daten ändern  Property Binding Page  124

Property- und Event-Bindings Page  126 Property-Binding ausführen Event-Handler ausführen
Ereignis tritt ein App ist bereit Alle Handler ausgeführt Properties gebunden

View Page  129 <button [disabled]="!von || !nach" (click)="search()"> Search
</button> <table> <tr *ngFor="let flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> <td [text-content]="flight.id"></td>

Recap Property-Binding: One-Way; Top/Down Event-Binding: One-Way; Bottom/Up Two-Way-Binding? Two-Way =
Property-Binding + Event-Binding Page  131

Property- und Event-Bindings kombinieren Page  132 <input [ngModel]="von" (ngModelChange)="updateVon($event)">
updateVon(newValue) { this.von = newValue; }

Property- und Event-Bindings kombinieren Page  133 <input [ngModel]="von" (ngModelChange)="von
= $event">

Syntax-Zucker für 2-Way-Binding Page  134 <input [(ngModel)]="von"> <input bindon-ngModel="von">

KOMPONENTEN MIT BINDINGS Page  138

Komponenten und Direktiven Direktiven Fügen Verhalten zu Elementen hinzu Referenzieren
Element über Selektor Beispiele: ngModel, ngStyle, ngClass Komponenten Direktiven mit Template Können weitere Direktiven haben Page  139

Beispiel: flug-card Page  141

Beispiel: flug-card in flug-suchen.html Page  143 <div *ngFor="let f
of fluege"> <flug-card [item]="f" [selected]="f == selectedFlug" (selectedChange)="select(f)"> </flug-card> </div>

flug-card Page  144 flug-card selected item > > >
selectedChange

Beispiel: flug-card @Component({ selector: 'flug-card', templateUrl: 'app/flug-card/flug-card.html' }) export class
FlugCard { @Input() item: Flug; @Input() selected: boolean; @Output() selectedChange = new EventEmitter(); select() { this.selectedChange.emit(true); } }

Template <div style="padding:20px;" [ngStyle]="{'background-color': (selected) ? 'orange' : 'lightsteelblue' }"
> <h2>{{item.abflugort}} - {{item.zielort}}</h2> <p>Flugnr. #{{item.id}}</p> <p>Datum: {{item.datum}}</p> <p> <button class="btn btn-default" (click)="select()"> Auswählen </button> </p> </div>

Komponente registrieren Page  151 @NgModule({ imports: [ CommonModule, FormsModule,
SharedModule ], declarations: [ FlugSuchenComponent, FlugCardComponent ], providers: [ FlugService ], exports: [ FlugSuchenComponent ] }) export class FlugModule { }

DEMO Page  152

I18N  Angular Compiler  Extrahiert Texte aus Templates in
Sprachfiles  Kompiliert Sprachfiles (XML) zurück in Anwendung  Kompilierung beim Start (JIT) oder Build (AOT)  https://angular.io/docs/ts/latest/cookbook/i18n.html  Sprach kann im Betrieb nicht geändert werden  Hohe Performance Page  153

I18N  Angular 2 Translate  Community Lösung  Leichtgewichtig,
erweiterbar  https://github.com/ocombe/ng2-translate  Migration von defacto-Standard für AngularJS 1.x  JSON-basierte Dateien  Sprache kann während der Laufzeit geändert werden  Nicht so performant wie Angular Compiler I18N  Keine Möglichkeit, Texte zu extrahieren Page  154

LIFE-CYCLE-HOOKS Page  155

Was sind Life-Cycle-Hooks Methoden in Komponenten Werden zu bestimmten Zeitpunkten
von Angular aufgerufen Page  156

Life-Cycle-Hooks (Auswahl) Page  157 OnInit ngOnInit OnDestroy ngOnDestroy OnChanges
ngOnChanges

Nutzung Page  158 @Component({ selector: 'my-component', […] }) export
class Component implements OnChange, OnInit { @Input() someData; ngOnInit() { […] } ngOnChange() { […] } } <my-component [someData]="myVariable"> </my-component>

ROUTING Page  159

Motivation  SPAs bestehen aus einer Seite  Innerhalb dieser
werden Bereiche ein- und ausgeblendet --> "Logische Seiten", Routen  Url sollte auf Route hinweisen  Bookmarks  Back-Button  Router unterstützen hierbei Page  160

Routing unter AngularJS Page  166 Logo + Menü Menü
2 Fußzeile SPA Platzhalter

Routing unter AngularJS Page  167 Logo + Menü Menü
2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier

Routen via Hash-Fragment  /FlugDemo#passagier  Hash-Fragment wird nie zum
Server gesendet Page  172

Routen via History API  /FlugDemo/passagier  Gesamte Url wird
zum Server gesendet  Server antwortet mit SPA  Server kann erste Ansicht "vorrendern"  Performance, SEO, …  SPA informiert Browser über Grenze zwischen physischer und logischer Url Page  173

Parameter  /FlugDemo#passagier/7  /FlugDemo/passagier/7 Page  174

COMPONENT ROUTER Page  176

Vorbereitung  ES6/TypeScript-Modul: @angular/router  (Alte Impl.: @angular/router-deprecated, vormals: angular2/router)
 Angular 2 Modul: RouterModule  Festlegen der Grenze zwischen URL und Route bei History API:  <base href="/">  Oder: Token APP_BASE_HREF (@angular/common) Page  180

Konfiguration Page  181 const APP_ROUTES: Routes = [ {
path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } }

Konfiguration Page  182 const APP_ROUTES: Routes = [ {
path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } }

Konfiguration Page  183 export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG); //
app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild

AppComponent Page  184 @Component({ selector: 'app', templateUrl: 'app/app.html' })
export class App { […] }

View von AppComponent Page  185 <a [routerLink]="['/']">Home</a> <a [routerLink]="['/flug-suchen']">Flug
suchen</a> <div> <router-outlet></router-outlet> </div>

ROUTEN MIT PARAMETER Page  188

Konfiguration Page  189 const APP_ROUTES: Routes = [ […]
{ path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }

Parameter auslesen Page  190 export class FlugEditComponent { public
id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }

Links auf Routen mit Parameter Page  192 <a [routerLink]="['/flug-edit',
flug.id]">Edit</a>

DEMO Page  194

[mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt ManfredSteyer

Angular 2 Workshop at w-jax 2016, Munich, Novem...

Angular 2 Workshop at w-jax 2016, Munich, November 2016

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript