Folien zu Vortrag auf den Angular 2 Days im Oktober 2016 in Berlin.

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

2. 2
Inhalt
 Motivation
 Konfiguration
 Routing-Parameter
 Child Routes
 Aux Routes
 Guards
 Lazy Loading und Preloading
 Shared Modules und Lazy Loading
Page  3
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  6

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

4. 4
Routen via Hash-Fragment
 /FlugDemo#passagier
 Hash-Fragment wird nie zum Server gesendet
Page  18
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  19

5. 5
Parameter
 /FlugDemo#passagier/7?showDetails=true
 /FlugDemo/passagier/7?showDetails=true
Page  20
COMPONENT ROUTER
Page  22

6. 6
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  26
Konfiguration
Page  27
const APP_ROUTES: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'flug-suchen',
component: FlugSuchenComponent
}
}

7. 7
Konfiguration
Page  28
const APP_ROUTES: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'flug-suchen',
component: FlugSuchenComponent
}
}
Konfiguration
Page  29
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

8. 8
AppComponent
Page  30
@Component({
selector: 'app',
templateUrl: 'app/app.html'
})
export class App {
[…]
}
View von AppComponent
Page  31
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/flug-suchen']">Flug suchen</a>
<div>
<router-outlet></router-outlet>
</div>

9. 9
ROUTEN MIT PARAMETER
Page  34
Konfiguration
Page  35
const APP_ROUTES: Routes = [
[…]
{
path: 'flug-suchen',
component: FlugSuchenComponent
},
{
path: 'flug-edit/:id',
component: FlugEditComponent
}
}

10. 10
Parameter auslesen
Page  36
export class FlugEditComponent {
public id: string;
constructor(
private route: ActivatedRoute) {
route.params.subscribe(
p => {
this.id = p['id'];
[…]
}
);
}
[…]
}
Links auf Routen mit Parameter
Page  38
<a [routerLink]="['/flug-edit', flug.id]">Edit</a>

11. 11
DEMO
Page  40
App
Home
Flug
suchen
Passagier
suchen
Passagier
editieren
id
FlightBookingModule
AppModule
HIERARCHISCHES
ROUTING
Page  46

12. 12
Hierarchische Views
Page  47
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1
Hierarchische Views
Page  48
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo/flugbuchen
FlugBuchen-Komponente

13. 13
Hierarchische Views
Page  49
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo/flugbuchen
Optionen
Platzhalter
FlugBuchen-Komponente
Hierarchische Views
Page  50
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo/flugbuchen/passagier
Optionen
Passagier-
Komponente
FlugBuchen-Komponente

14. 14
Konfiguration
Page  51
const APP_ROUTES: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'flug-buchen',
component: FlugBuchenComponent,
children: [
{
path: 'flug-suchen',
component: FlugSuchenComponent
},
[…]
]
}
];
DEMO
Page  52
App
Home
Flug
buchen
Flug
suchen
Flug
editieren
Passagier
suchen

15. 15
Übung
 Betrachten Sie das gezeigte Beispiel und führen Sie
es aus
 Erweitern Sie analog dazu Ihr Beispiel um mehrere
Routen (z. B. Home, PassagierSuchen, PassagierEdit)
 Erweitern Sie analog dazu Ihr Beispiel hierarchisches
Routing
Page  54
AUX-ROUTES
Page  55

16. 16
Aux-Routes
Page  56
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
Aux-Routes
Page  57
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights

17. 17
Aux-Routes
Page  58
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page  59
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)

18. 18
Aux-Routes
Page  60
Logo + Menu
Menu2
Footer
SPA Flight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
Modal-Component
Platzhalter definieren
Page  61
<router-outlet></router-outlet>
<hr>
<router-outlet name="aux"></router-outlet>
Standard-Name: primary

19. 19
Konfiguration
Page  62
export const ROUTE_CONFIG: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'info',
component: InfoComponent,
outlet: 'aux'
},
{
path: 'dashboard',
component: DashboardComponent,
outlet: 'aux'
},
Aux-Routes routen
Page  63
<a [routerLink]="[{outlets: { aux: 'info' }}]">
Activate Info
</a>
<a [routerLink]="[{outlets: { aux: null }}]">
Deactivate Info
</a>

20. 20
Programmatisch routen
Page  64
export class AppComponent {
constructor(private router: Router) {
}
activateInfo() {
this.router.navigate([{outlets: { aux: 'info' }}]);
}
deactivateInfo() {
this.router.navigate([{outlets: { aux: null }}]);
}
}
DEMO
Page  65

21. 21
GUARDS
Page  66
Was sind Guards?
Services
Werden beim Aktivieren bzw. Deaktivieren
einer Route aktiv
Können Aktivierung und Deaktivierung
verhindern
Page  67

22. 22
Guards
CanActivate canActivate
CanActivateChild canActivateChild
CanDeactivate<T> canDeactivate
Rückgabewert: boolean | Observable<boolean> | Promise<boolean>
Guards in der Konfiguration
Page  70
const APP_ROUTES: Routes = [
{
path: '/flug-buchen',
component: FlugBuchenComponent,
canActivate: [AuthGuard],
children: [
{
path: 'flug-edit/:id',
component: FlugEditComponent,
canDeactivate: [FlugEditGuard]
},
[…]
]
]
Token

23. 23
Provider für Guards
Page  71
export const ROUTER_PROVIDERS = [
{ provide: FlugEditGuard, useClass: FlugEditGuard }
{ provide: AuthGuard, useClass: AuthGuard }
];
Provider für Guards
Page  72
export const ROUTER_PROVIDERS = [
FlugEditGuard,
AuthGuard
];
// app.module.ts
@NgModule({
providers: [
ROUTER_PROVIDERS
],
[…]
})
export class AppModule {
}

24. 24
DEMO
Page  73
LAZY LOADING
Page  74

25. 25
Warum Lazy Loading?
Module erst bei Bedarf nachladen
Verbesserung der Start-Performance
Page  75
Eigene Routen für Feature Module
Page  76
const FLUG_ROUTES = [
{
path: '',
component: FlugBuchenComponent,
[…]
},
[…]
}
export const FlugRouterModule =
RouterModule.forChild(FLUG_ROUTES);

26. 26
Feature Module
Page  77
@NgModule({
imports: [
[…],
FlugRouterModule,
[…]
],
declarations: [
FlugBuchenComponent,
[…]
],
[…]
})
export class FlugModule {
}
Root Module mit Lazy Loading
Page  80
const APP_ROUTE_CONFIG: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'flights',
loadChildren:
'[…]flight-booking.module#FlightBookingModule'
}
];

27. 27
Konfiguration von Webpack
angular2-router-loader
Page  81
DEMO
Page  82

28. 28
PRELOADING
Page  83
Idee
Eventuell später benötigte Module werden mit
freien Ressourcen vorgeladen
Wird das Modul später tatsächlich benötigt,
steht es augenblicklich zur Verfügung
Page  84

29. 29
Preloading aktivieren
Page  85
export const AppRoutesModule =
RouterModule.forRoot(
ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
LAZY LOADING UND
SHARED SERVICES
Page  86

30. 30
Recap
Page  87
Mehrfache „globale“ Services
Page  88

31. 31
Shared Module
Page  89
@NgModule({
[…],
providers: []
})
export class SharedModule {
}
Shared Module
Page  90
@NgModule({
[…],
providers: []
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [AuthService, […]]
}
}
}

32. 32
Lösung
Page  91
DEMO
Page  92

33. 33
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt
ManfredSteyer