steyer_Routing.pdf

Transcript

1. 22.02.2017 1 Der Router in Angular im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page  2 Manfred Steyer
2. 22.02.2017 2 Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen lernen Inhalt • Basics zu Routing • Child-Routes • Aux-Routes • Guards • Lazy Loading Page  4
3. 22.02.2017 3 Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA Basics Page  6
4. 22.02.2017 4 Warum Routing? • SPAs bestehen aus einer Seite • Seiten simulieren  Routen • Url sollte auf Route hinweisen • Bookmarks • Back-Button • Router unterstützen hierbei Page  7 Routing unter AngularJS Page  8 Logo + Menü Menü 2 Fußzeile SPA Platzhalter
5. 22.02.2017 5 Routing unter AngularJS Page  9 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier Routing unter AngularJS Page  10 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
6. 22.02.2017 6 Routen als Url-Segmente • /FlugDemo/passagier • History API • Gesamte Url wird zum Server gesendet • Server antwortet mit SPA • Server kann erste Ansicht "vorrendern" • Performance, SEO, … • Festlegen der Grenze zwischen URL und Route bei History API: • <base href="/FlugDemo"> • Oder: Token APP_BASE_HREF (@angular/common) Page  11 Konfiguration Page  12 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent }, { path: '**', redirectTo: 'home' } ]
7. 22.02.2017 7 Konfiguration Page  13 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 View von AppComponent Page  14 <a [routerLink]="'/'">Home</a> <a [routerLink]="'/flug-suchen'">Flug suchen</a> <div> <router-outlet></router-outlet> </div>
8. 22.02.2017 8 Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page  17 Parameter Page  18 const APP_ROUTES: Routes = [ […] { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
9. 22.02.2017 9 Parameter auslesen Page  19 export class FlugEditComponent { public id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] } Links auf Routen mit Parameter Page  20 <a [routerLink]="['/flug-edit', flug.id]">Edit</a>
10. 22.02.2017 10 DEMO Hierarchisches Routing Page  22
11. 22.02.2017 11 Hierarchische Views Page  23 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1 Hierarchische Views Page  24 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
12. 22.02.2017 12 Hierarchische Views Page  25 Logo + Menü Menü 2 Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen Hierarchische Views Page  26 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
13. 22.02.2017 13 Konfiguration Page  27 const FLIGHT_ROUTES: Routes = [ […] { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ]; DEMO Page  28 App Home Flug buchen Flug suchen Flug editieren Passagier suchen
14. 22.02.2017 14 Aux-Routes Page  29 Aux-Routes Page  30 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
15. 22.02.2017 15 Aux-Routes Page  31 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights Aux-Routes Page  32 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
16. 22.02.2017 16 Aux-Routes Page  33 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal) Aux-Routes Page  34 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
17. 22.02.2017 17 Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page  35 Platzhalter definieren Page  36 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name: primary
18. 22.02.2017 18 Konfiguration Page  37 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  38 <a [routerLink]="[{outlets: { aux: 'info' }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
19. 22.02.2017 19 Programmatisch routen Page  39 export class AppComponent { constructor(private router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } } DEMO Page  40
20. 22.02.2017 20 Guards Page  41 Was sind Guards? • Services • Werden beim Aktivieren bzw. Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page  42
21. 22.02.2017 21 Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate Guards in der Konfiguration Page  45 const APP_ROUTES: Routes = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
22. 22.02.2017 22 Provider für Guards Page  46 export const ROUTER_PROVIDERS = [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ]; Provider für Guards Page  47 export const ROUTER_PROVIDERS = [ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
23. 22.02.2017 23 DEMO Page  48 Lazy Loading
24. 22.02.2017 24 Root Module mit Lazy Loading Page  56 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ]; Routen für Feature Module Page  57 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
25. 22.02.2017 25 Konfiguration von Webpack • angular2-router-loader Page  58 DEMO
26. 22.02.2017 26 Preloading Page  60 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  61
27. 22.02.2017 27 Preloading aktivieren Page  62 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); Lazy Loading und Shared Services Page  63
28. 22.02.2017 28 Lazy Loading und Shared Modules Page  64 AppModule FlugModule SharedModule includes includes (lazy) includes Lazy Loading und Shared Modules Page  65 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
29. 22.02.2017 29 Lazy Loading und Shared Modules Page  66 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService Lösung Page  67 AppModule FlugModule SharedModule includes (lazy) includes CoreModule includes includes Core-Module soll nur ins AppModule eingebunden werden Globale Provider, wie AuthService & Shell
30. 22.02.2017 30 DEMO Lösung (für Libraries) Page  69 AppModule FlugModule AuthModule includes (lazy) CoreModule
31. 22.02.2017 31 Lösung (für Libraries) Page  70 AppModule FlugModule AuthModule includes (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell Zusammenfassung Platzhalter Child Routes Aux Routes Guards
32. 22.02.2017 32 Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer