Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Der neue Component Router für Angular 2

793 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Der neue Component Router für Angular 2

  1. 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. 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. 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. 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. 5 Parameter  /FlugDemo#passagier/7?showDetails=true  /FlugDemo/passagier/7?showDetails=true Page  20 COMPONENT ROUTER Page  22
  6. 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. 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. 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. 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. 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. 11 DEMO Page  40 App Home Flug suchen Passagier suchen Passagier editieren id FlightBookingModule AppModule HIERARCHISCHES ROUTING Page  46
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24 DEMO Page  73 LAZY LOADING Page  74
  25. 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. 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. 27 Konfiguration von Webpack angular2-router-loader Page  81 DEMO Page  82
  28. 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. 29 Preloading aktivieren Page  85 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules }); LAZY LOADING UND SHARED SERVICES Page  86
  30. 30. 30 Recap Page  87 Mehrfache „globale“ Services Page  88
  31. 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. 32 Lösung Page  91 DEMO Page  92
  33. 33. 33 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt ManfredSteyer

×