Angular Advanced Routing

Advanced Routing LAURENT DUVEAU JUNE 7TH, 2018

© LDEX, 2015Angular Vancouver Meetup, June 2018 Laurent Duveau @LaurentDuveau I am based in Montreal, Qc Founder of the Angular Academy 2-day Angular Classroom Training 111 classes in 2 years! Montreal, Quebec, Toronto, Ottawa , Vancouver, Calgary, Winnipeg, London, Copenhagen, Helsinki…

© LDEX, 2015Angular Vancouver Meetup, June 2018 ADVANCED ROUTING Agenda Lazy Loading Preloading Modules Router events Diagnostic with traces Auxiliary routes Routes Transitions (Animations) Guards Resolve

© LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Lazy load the Products Module! const routes: Routes = [ {path: '', redirectTo:'/home', pathMatch:'full'}, {path: 'products', loadChildren:'./products/products.module#ProductsModule'}, {path: 'home', component: HomeComponent}, {path: 'contact', component: ContactComponent}, ]; app.routing.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Make its routes relative to ‘products/’ const routes: Routes = [ { path: 'products', component: ProductListComponent }, { path: 'products/:id', component: ProductDetailComponent } ]; products.routing.ts const routes: Routes = [ { path: '', component: ProductListComponent }, { path: ':id', component: ProductDetailComponent } ]; products.routing.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 LAZY LOADING Do not import lazy loaded modules! @NgModule({ imports:[BrowserModule, HttpModule, ProductsModule] }) export class AppModule { } app.module.ts @NgModule({ imports:[BrowserModule, HttpModule] }) export class AppModule { } app.module.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Preloading Modules! One built-in preloading strategy: PreloadAllModules Create your Custom Preloading Strategy! Class that implements PreloadingStrategy 16 @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule], }) export class AppRoutingModule { }

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Router Events Event Description NavigationStart Navigation starts RoutesRecognized Router parses the URL and the routes are recognized RouteConfigLoadStart Before the Router lazy loads a route configuration RouteConfigLoadEnd After a route has been lazy loaded NavigationEnd Navigation ends successfully NavigationCancel Navigation is canceled. This is due to a Route Guard returning false during navigation NavigationError Navigation fails due to an unexpected error

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Router Events 20 @Component({ selector: 'my-app', template: `<router-outlet></router-outlet>` }) export class AppComponent { constructor(private router: Router) {} ngOnInit() { this.router.events .subscribe((event) => { if (event instanceof NavigationEnd) { console.log('NavigationEnd:', event); } }); } }

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Activate traces 23 @NgModule({ imports: [RouterModule.forRoot(routes, { enableTracing: environment.production ? false : true } )] }) export class AppModule { } app.module.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Auxiliary Routes Navigation happens in a <router-outlet></router-outlet> We can have more than one! So we can navigate to several routes at the same time

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Auxiliary Routes Create a named router-outlet Add a route to target this outlet Link to navigate to the outlet 27 <router-outlet></router-outlet> <router-outlet name="popup"></router-outlet> {path:'contact', component:ContactComponent, outlet:'popup'} <a [routerLink]="[{outlets: {popup:['contact']}}]">Contact</a>

Routes Transitions (Animations) 29

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Animations Define animations files 30 import { trigger, animate, transition, style } from '@angular/animations'; export const fadeInAnimation = // trigger name for attaching this animation to an element using the [@triggerName] syntax trigger('fadeInAnimation', [ // route 'enter' transition transition(':enter', [ // css styles at start of transition style({ opacity: 0 }), // animation and styles at end of transition animate('.5s', style({ opacity: 1 })) ]), ]); fade-in.animation.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Animations Import BrowserAnimationsModule Use component decorator 31 @Component({ selector: 'app-product-list’, animations: [fadeInAnimation], host: { '[@fadeInAnimation]': ''} }) export class MyComponent { animation to use attached to host to run animation when component is activated

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Routes Guards CanActivate CanDeactivate NavigationNavigation Component Decides if a route can be activated - User logged-in ? Decides if a route can be deactivated - Form saved ?

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Routes Guards 35 export class LoginRouteGuard implements CanActivate { constructor( private loginService: LoginService, private router: Router) {} canActivate() { if(!this.loginService.isLoggedIn()) { this.router.navigateByUrl("/login"); return false; } return true; } } login-route-guard.service.ts { path: 'admin', component: AdminComponent, canActivate: [LoginRouteGuard] }, app-routing.module.ts

© LDEX, 2015Angular Vancouver Meetup, June 2018 ROUTING Route Resolver Pre-fetching component data before navigating Avoid a blank component while waiting for the data to be returned from the server Pre-fetch data from the server so it's ready the moment the route is activated! Create a service and implement the Resolve interface

Angular Advanced Routing

More Related Content

What's hot

Similar to Angular Advanced Routing

More from Laurent Duveau

Recently uploaded

Angular Advanced Routing