angular5

Transcript

1. Angular Marchenkov Danila, Software Developer
2. Routing & Navigation
3. How to transition • Direct Url change • links on the page • back & forward browser events
4. <base href=‘/’>
5. const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } }, { path: '', redirectTo: '/heroes', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];
6. <router-outlet></router-outlet>
7. <a routerLink=“/crisis-center" routerLinkActive=“active"> Crisis Center </a>
8. Activated Route
9. url An Observable of the route path(s), represented as an array of strings for each part of the route path. data An Observable that contains the data object provided for the route. Also contains any resolved values from the resolve guard. paramMap An Observable that contains a map of the required and optional parameters specific to the route. The map supports retrieving single and multiple values from the same parameter. queryParamMap An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter. fragment An Observable of the URL fragment available to all routes. outlet The name of the RouterOutlet used to render the route. For an unnamed outlet, the outlet name is primary. routeConfig The route configuration used for the route that contains the origin path. parent The route's parent ActivatedRoute when this route is a child route. firstChild Contains the first ActivatedRoute in the list of this route's child routes. children Contains all the child routes activated under the current route.
10. NavigationStart An event triggered when navigation starts. RoutesRecognized An event triggered when the Router parses the URL and the routes are recognized. RouteConfigLoadStart An event triggered before the Router lazy loads a route configuration. RouteConfigLoadEnd An event triggered after a route has been lazy loaded. NavigationEnd An event triggered when navigation ends successfully. NavigationCancel An event triggered when navigation is canceled. This is due to a Route Guard returning NavigationError An event triggered when navigation fails due to an unexpected error. Navigation hooks
11. Resolve
12. @Injectable() export class CrisisDetailResolver implements Resolve<Crisis> { constructor(private cs: CrisisService, private router: Router) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> { let id = route.paramMap.get('id'); return this.cs.getCrisis(id).take(1).map(crisis => { if (crisis) { return crisis; } else { // id not found this.router.navigate(['/crisis-center']); return null; } }); } } import { CrisisDetailResolver } from './crisis-detail-resolver.service'; @NgModule({ imports: [ RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule ], providers: [ CrisisDetailResolver ] }) export class CrisisCenterRoutingModule { }
13. Guards
14. Can-activate
15. @NgModule({ imports: [ RouterModule.forChild(adminRoutes) ], exports: [ RouterModule ] }) export class AdminRoutingModule {} const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], children: [ { path: '', canActivateChild: [AuthGuard], children: [ { path: 'crises', component: ManageCrisesComponent }, { path: 'heroes', component: ManageHeroesComponent }, { path: '', component: AdminDashboardComponent } ] } ] } ];
16. import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate, CanActivateChild { constructor(private authService: AuthService, private router: Router) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { let url: string = state.url; return this.checkLogin(url); } canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.canActivate(route, state); } /* . . . */ }
17. Can-deactivate
18. @Injectable() export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent> { canDeactivate( component: CrisisDetailComponent, route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean> | boolean { if (!component.crisis || component.crisis.name === component.editName) { return true; } return component.dialogService.confirm('Discard changes?'); } } { path: ':id', component: CrisisDetailComponent, canDeactivate: [CanDeactivateGuard] }
19. Q: One app bundle? A: Meh, lazy load
20. { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', },
21. Q: lazy load ? A: Meh
22. RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules, enableTracing: true }) import { RouterModule, PreloadAllModules } from '@angular/router';
23. -Custom? -Sure import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core'; import { PreloadingStrategy, Route } from '@angular/router'; import { Observable } from 'rxjs/Observable'; @Injectable() export class SelectivePreloadingStrategy implements PreloadingStrategy { preloadedModules: string[] = []; preload(route: Route, load: () => Observable<any>): Observable<any> { if (route.data && route.data['preload']) { // add the route path to the preloaded module array this.preloadedModules.push(route.path); // log the route path to the console console.log('Preloaded: ' + route.path); return load(); } else { return Observable.of(null); } } }
25. Multiple named outlets
26. <div> <router-outlet name="mailboxOutlet"></router-outlet> <router-outlet name="maillistOutlet"></router-outlet> <router-outlet name="emailContentOutlet"></router-outlet> </div> this.router.navigate(['/home', { outlets: { mailboxOutlets: ‘mailbox' } }]);
27. RouteReuseStrategy
28. import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; export class CustomReuseStrategy implements RouteReuseStrategy { handlers: {[key: string]: DetachedRouteHandle} = {}; shouldDetach(route: ActivatedRouteSnapshot): boolean { return !!route.data && !!(route.data as any).shouldReuse; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { this.handlers[route.routeConfig.path] = handle; } shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!this.handlers[route.routeConfig.path]; } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null; } return this.handlers[route.routeConfig.path]; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig; } }