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. The Angular Router
    Hello Trivandrum!
    TRIVANDRUM TECHCON20

    View full-size slide

  2. Nishu Goel
    @DcoustaWilson
    Developer, UI Garage, IBM
    Blog: https://nishugoel.wordpress.com/
    GitHub: NishuGoel

    View full-size slide

  3. 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

    View full-size slide

  4. Angular Router
    the official library for routing
    in the angular-based web
    applications. It comes
    packaged as
    @angular/router.

    View full-size slide

  5. - Navigates to the configured routes for
    the components which are routable.
    - import the RouterModule
    - configure the router states
    - navigate from one view to another

    View full-size slide

  6. 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.

    View full-size slide

  7. 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

    View full-size slide

  8. navigate!
    route from template:
    Profile
    route from code:
    this._router.navigate(['errorpage']);
    @DcoustaWilson

    View full-size slide


  9. It is like a placeholder for
    the next view.



    Tip
    Only see the route
    change but not view?
    place it exactly where
    you want the next
    component view.

    View full-size slide

  10. Try this out here.

    View full-size slide

  11. Wildcard route?

    View full-size slide

  12. Router lifecycle
    let us understand the

    View full-size slide

  13. 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

    View full-size slide

  14. Give this a try here.

    View full-size slide

  15. events:
    -
    NavigationStart
    - RoutesRecognized (signalled when URL matched, or redirected)

    View full-size slide

  16. navigate! but, wait!

    View full-size slide

  17. Are we allowed to navigate? check for guards

    View full-size slide

  18. If the guard fails, the
    router emits a
    NavigationCancel
    event.

    View full-size slide

  19. before proceeding to the next router event, let us look at other guards:
    the order of execution of guards

    View full-size slide

  20. canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable|Promise|boolean|UrlTree {
    return this.permissions.canActivate(this.currentUser, route.params.id);
    }
    Create a guard
    ng g guard
    canActivate guard function
    always runs before fetching the data, pointless to
    load data before ensuring if activation will take place.

    View full-size slide

  21. Without route resolvers

    View full-size slide

  22. resolvers
    prefetch component data during routing
    @DcoustaWilson

    View full-size slide

  23. With route resolvers

    View full-size slide

  24. 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

    View full-size slide

  25. Lazy Loading
    asynchronously load
    the feature module for
    routing whenever
    required.

    View full-size slide

  26. {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

    View full-size slide

  27. Lazy loading bundle
    difference

    View full-size slide

  28. Lazy load routes here.

    View full-size slide

  29. Updates in the
    router
    (v7, v8, v9)

    View full-size slide

  30. v7
    - add pathParamsChange mode for
    runGuardsAndResolvers
    runGuardsAndResolvers: ‘
    paramsChange’
    - Return UrlTree from guard
    const tree: UrlTree =
    this.router.parseUrl(url);
    - Guard priority using prioritizedGuardValue
    Observable

    View full-size slide

  31. 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')

    View full-size slide

  32. 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]));

    View full-size slide

  33. https://medium.com/angular-in-
    depth/the-angular-router-in-the-
    newer-versions-b50e2ced5d5

    View full-size slide

  34. Resources
    - Angular changelog
    - Angular documentation
    - Angular router series, Nate Lipinski
    - Book - Step by Step Angular Routing
    @DcoustaWilson

    View full-size slide

  35. Dive deeper into the router
    here:
    https://amzn.to/2t54EVI

    View full-size slide

  36. Thank you so much!
    github.com/NishuGoel
    @DcoustaWilson
    nishugoel.wordpress.com

    View full-size slide