Der neue Angular Router im Detail betrachtet

Transcript

1. Der neue Angular Router im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer ManfredSteyer
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen lernen
4. Inhalt • Basics zu Routing • Child-Routes • Aux-Routes • Guards • Lazy Loading • Preloading Page ▪ 4
5. Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA
6. Routing Basics Page ▪ 6
7. Routing unter Angular Page ▪ 7 Logo + Menü Menü 2 Fußzeile SPA Platzhalter
8. Routing unter Angular Page ▪ 8 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier
9. Routen via Hash-Fragment • /FlugDemo#passagier • Hash-Fragment wird nie zum Server gesendet Page ▪ 9
10. 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 (eigentlicher) Url und Route Page ▪ 10
11. Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page ▪ 11
12. Konfiguration Page ▪ 12 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
13. Konfiguration Page ▪ 13 const APP_ROUTES: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
14. Konfiguration Page ▪ 14 const APP_ROUTES: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, […] { path: '**', redirectTo: 'home' } ]
15. Konfiguration Page ▪ 15 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
16. AppComponent Page ▪ 16 @Component({ selector: 'app', templateUrl: './app.html' }) export class App { […] }
17. View von AppComponent Page ▪ 18 <a routerLink="/">Home</a> <a routerLink="/flug-suchen">Flug suchen</a> <div> <router-outlet></router-outlet> </div>
18. Routen mit Parameter Page ▪ 20
19. Konfiguration Page ▪ 21 const APP_ROUTES: Routes = [ […] { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
20. Parameter auslesen Page ▪ 22 export class FlugEditComponent { public id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
21. Links auf Routen mit Parameter Page ▪ 23 <a [routerLink]="['/flug-edit', flug.id]">Edit</a>
22. DEMO Page ▪ 24 App Home Search Flight Edit Flight Search Passenger Your Bookings FlightBookingModule AppModule
23. Hierarchisches Routing Page ▪ 25
24. Hierarchische Views Page ▪ 26 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1
25. Hierarchische Views Page ▪ 27 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
26. Hierarchische Views Page ▪ 28 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen Optionen Platzhalter FlugBuchen-Komponente
27. Hierarchische Views Page ▪ 29 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
28. Konfiguration Page ▪ 30 const APP_ROUTES: Routes = [ { path: '', component: HomeComponent }, { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
29. DEMO Page ▪ 31 App Home Flight- Booking Search Flight Edit Flight Search Passenger Your Bookings
30. Aux-Routes Page ▪ 34
31. Aux-Routes Page ▪ 35 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
32. Aux-Routes Page ▪ 36 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
33. Aux-Routes Page ▪ 37 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
34. Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
35. Aux-Routes Page ▪ 39 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
36. Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page ▪ 40
37. Platzhalter definieren Page ▪ 41 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name: primary
38. Konfiguration Page ▪ 42 export const ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
39. Aux-Routes routen Page ▪ 43 <a [routerLink]="[{outlets: { aux: 'info' }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
40. Programmatisch routen Page ▪ 44 export class AppComponent { constructor(private router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
41. DEMO Page ▪ 45
42. Guards Page ▪ 46
43. Was sind Guards? • Services • Werden beim Aktivieren bzw. Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 47
44. Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
45. Guards in der Konfiguration Page ▪ 50 const APP_ROUTES: Routes = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
46. Provider für Guards Page ▪ 51 export const ROUTER_PROVIDERS = [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
47. Provider für Guards Page ▪ 52 export const ROUTER_PROVIDERS = [ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
48. DEMO Page ▪ 53
49. Lazy Loading Page ▪ 61
50. Warum Lazy Loading? • Module erst bei Bedarf nachladen • Verbesserung der Start-Performance Page ▪ 62
51. Root Module mit Lazy Loading Page ▪ 63 const APP_ROUTE_CONFIG: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: '[…]flight-booking.module#FlightBookingModule' } ];
52. Routen für Feature Module Page ▪ 64 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
53. Konfiguration von Webpack • angular2-router-loader Page ▪ 65
54. DEMO Page ▪ 66
55. Preloading Page ▪ 67
56. 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 ▪ 68
57. Preloading aktivieren Page ▪ 69 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
58. Lazy Loading und Shared Services Page ▪ 70
59. Lazy Loading und Shared Modules Page ▪ 71 AppModule FlugModule SharedModule includes includes (lazy) includes
60. Lazy Loading und Shared Modules Page ▪ 72 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
61. Lazy Loading und Shared Modules Page ▪ 73 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
62. Lösung Page ▪ 74 AppModule FlugModule SharedModule includes (lazy) includes CoreModule includes includes Core-Module soll nur ins AppModule eingebunden werden Globale Provider, wie AuthService & Shell
63. DEMO
64. Lösung (für Libraries) Page ▪ 76 AppModule FlugModule AuthModule includes (lazy) CoreModule
65. Lösung (für Libraries) Page ▪ 77 AppModule FlugModule AuthModule includes (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
66. AuthModule Page ▪ 79 @NgModule({ […], providers: [] }) export class AuthModule { }
67. AuthModule Page ▪ 80 @NgModule({ […], providers: [] }) export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
68. DEMO Page ▪ 81
69. Zusammenfassung Platzhalter Child Routes Aux Routes Guards Lazy Loading Preloading
70. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer