Workshop at JAX 2016 in Mainz

1. 1
Angular 2.0: Routing
Manfred Steyer
ManfredSteyer
Inhalt
Motivation
Konfiguration
Routing-Parameter
Hierarchisches Routing
Lifecycle-Hooks
Page  2

2. 2
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seiten"
 Routen verweisen auf diese Seiten
 Route ist Teil der Url
 Bookmarks
 Back-Button
 Router unterstützen hierbei
Page  4
Routing unter AngularJS
Page  10
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter

3. 3
Routing unter AngularJS
Page  11
Logo + Menü
Menü2
Fußzeile
SPA Passagier-
Komponente
/FlugDemo#flugbuchen/passagier
Hierarchische Views
Page  12
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1

4. 4
Hierarchische Views
Page  13
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
FlugBuchen-Komponente
Hierarchische Views
Page  14
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
Optionen
Platzhalter
FlugBuchen-Komponente

5. 5
Hierarchische Views
Page  15
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen
Passagier-
Komponente
FlugBuchen-Komponente
Routen via Hash-Fragment
 /FlugDemo#flugbuchen/passagier
 Hash-Fragment wird nie zum Server gesendet
Page  16

6. 6
Routen via History API
 /FlugDemo/flugbuchen/passagier
 Initialer Aufruf:
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  17
Parameter
 /FlugDemo/flugbuchen/passagier/7
 /FlugDemo#flugbuchen/passagier/7
Page  18

7. 7
COMPONENT ROUTER
Page  20
Vorbereitung
 Bundle für Router über Script-Verweis inkludieren:
 <script src="node_modules/angular2/bundles/router.dev.js">
</script>
 ROUTER_PROVIDERS
 Für Hash-Strategie
 provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page  21

8. 8
History API (PathLocationStrategy)
Standard
<base href="/">
Alternative: Token APP_BASE_HREF
Page  22
AppComponent
Page  23
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home,
name: 'Home', useAsDefault: true },
{ path: '/flug-suchen', component: FlugSuchen,
name: 'FlugSuchen' }
])
export class App {
[…]
}

9. 9
View von AppComponent
Page  24
<a [routerLink]="['/Home']">Home</a>
<a [routerLink]="['/FlugSuchen']">Flug suchen</a>
<div>
<router-outlet></router-outlet>
</div>
Aktives Element bekommt Klasse 'router-link-active'
ROUTEN MIT PARAMETER
Page  25

10. 10
Routen mit Parameter
Page  26
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, name: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
name: 'FlugSuchen' },
{ path: '/flug-edit/:id', component: FlugEdit,
name: 'FlugEdit' }
])
export class App {
[…]
}
Route-Parameter auslesen
Page  27
@Component({
templateUrl: 'app/components/flug-edit/flug-edit.html'
})
export class FlugEdit {
id;
constructor(params: RouteParams) {
this.id = params.get('id');
this.info = 'Flug: #' + this.id;
}
}

11. 11
Links auf Routen mit Parameter
Page  28
<a [routerLink]="['/FlugEdit', {id: flug.id}]">Edit</a>
DEMO
Page  29

12. 12
ZUSAMMENFASSUNG
Page  53
Zusammenfassung
Page  54
Angular:
Weite
Verbreitung
Komponenten Data-Binding
Dependency
Injection
Services Formulare
Validierung Routing

13. 13
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact