View
333
Download
0
Category
Preview:
Citation preview
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
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
Routing unter AngularJS
Page 12
Logo + Menü
Men
ü 2
Fußzeile
SPAPlatzhalter
Routing unter AngularJS
Page 13
Logo + Menü
Men
ü 2
Fußzeile
SPAPassagier-
Komponente
/FlugDemo#passagier
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
Parameter
/FlugDemo#passagier/7?showDetails=true
/FlugDemo/passagier/7?showDetails=true
Page 20
COMPONENT ROUTER
Page 22
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
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
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
ROUTEN MIT PARAMETER
Page 34
Konfiguration
Page 35
const APP_ROUTES: Routes = [
[…]
{path: 'flug-suchen',component: FlugSuchenComponent
},{
path: 'flug-edit/:id',component: FlugEditComponent
}}
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
DEMO
Page 40
App
Home
Flug suchen
Passagier suchen
Passagier editieren
id
FlightBookingModule
AppModule
HIERARCHISCHES ROUTING
Page 46
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
Flu
gB
uch
en
-Ko
mp
on
en
te
13
Hierarchische Views
Page 49
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo/flugbuchen
Optionen
Platzhalter
Flu
gB
uch
en
-Ko
mp
on
en
te
Hierarchische Views
Page 50
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo/flugbuchen/passagier
Optionen
Passagier-
Komponente
Flu
gB
uch
en
-Ko
mp
on
en
te
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
Ü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
Aux-Routes
Page 56
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
Aux-Routes
Page 57
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Named Placeholder
/FlightApp/flights
17
Aux-Routes
Page 58
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page 59
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
18
Aux-Routes
Page 60
Logo + Menu
Men
u 2
Footer
SPAFlight-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
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
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
GUARDS
Page 66
Was sind Guards?
Services
Werden beim Aktivieren bzw. Deaktivieren
einer Route aktiv
Können Aktivierung und Deaktivierung
verhindern
Page 67
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
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
DEMO
Page 73
LAZY LOADING
Page 74
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
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
Konfiguration von Webpack
angular2-router-loader
Page 81
DEMO
Page 82
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
Preloading aktivieren
Page 85
export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
LAZY LOADING UND SHARED SERVICES
Page 86
30
Recap
Page 87
Mehrfache „globale“ Services
Page 88
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
Lösung
Page 91
DEMO
Page 92
33
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt
ManfredSteyer
Recommended