Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Angular Router - TrivandrumTechCon20

Nishu Goel
January 25, 2020

The Angular Router - TrivandrumTechCon20

This presentation talks about the Angular router covering the basic routing technique, Angular router events, guards, route resolvers, lazy loading of routes, and the latest changes in the Angular router (Angular v7, v8, v9)

Nishu Goel

January 25, 2020
Tweet

More Decks by Nishu Goel

Other Decks in Technology

Transcript

  1. 1. Agenda ➔ What is Angular Router? ➔ Router Lifecycle

    Events, guards, resolvers ➔ Lazy Loading of routes dynamically load modules ➔ Updates in Latest versions Angular version 7, 8, 9
  2. Angular Router the official library for routing in the angular-based

    web applications. It comes packaged as @angular/router.
  3. - Navigates to the configured routes for the components which

    are routable. - import the RouterModule - configure the router states - navigate from one view to another
  4. Import the RouterModule import { Routes, RouterModule } from '@angular/router';

    @NgModule({ imports: [RouterModule.forRoot(routes)] }) Tip With a separate routing module, AppRoutingModule, export the RouterModule in the exports array.
  5. const routes: Routes = [ { path: 'connect', component: ConnectComponent

    }, { path: 'profile', component: ProfileComponent, }, { path: ‘**’, component: WildCardComponent } Tip Do not place the wildcard route before any other, as the route states are checked in the order defined in the configuration. configure the router states
  6. <router-outlet> It is like a placeholder for the next view.

    <section class="body-section"> <router-outlet></router-outlet> </section> Tip Only see the route change but not view? place it exactly where you want the next component view.
  7. observing the life cycle constructor(private router: Router) { this.router.events.subscribe( (event:

    RouterEvent) => console.log(event)) } Tip RouterModule.forRoot(ROUTES, { enableTracing: true }); For debugging purpose
  8. before proceeding to the next router event, let us look

    at other guards: the order of execution of guards
  9. canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree { return this.permissions.canActivate(this.currentUser,

    route.params.id); } Create a guard ng g guard <guard-name> canActivate guard function always runs before fetching the data, pointless to load data before ensuring if activation will take place.
  10. Finally, activation! private updateTargetUrlAndHref(): void { this.href = this.locationStrategy.prepareExternalUrl(this.router. serializeUrl(this.urlTree));

    } events: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd NavigationEnd - update the URL in the browser
  11. {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)}; canLoad guard

    load a particular module only if it can be loaded. This means that check the criteria before loading it Read about preloading strategies here: https://angular.io/guide/ro uter#how-preloading- works
  12. v7 - add pathParamsChange mode for runGuardsAndResolvers runGuardsAndResolvers: ‘ paramsChange’

    - Return UrlTree from guard const tree: UrlTree = this.router.parseUrl(url); - Guard priority using prioritizedGuardValue Observable<boolean|UrlTree>
  13. v8 - Dynamic import of lazy loaded routes Earlier: {path:

    ‘user’, loadChildren: ‘./users/user.module#UserModule’} Now: {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)}; - add hash-based navigation option to setUpLocationSync setUpLocationSync(ngUpgrade: UpgradeModule, urlType: "path" | "hash" = 'path')
  14. v9 - make routerLinkActive work with query params which contain

    arrays Object.keys(containee).every(key => containee[key] === container[key]); //changed to Object.keys(containee).every(key => equalArraysOrString(container[key], containee[key]));
  15. Resources - Angular changelog - Angular documentation - Angular router

    series, Nate Lipinski - Book - Step by Step Angular Routing @DcoustaWilson