The Angular Router - TrivandrumTechCon20

Slide 1

Slide 1 text

The Angular Router Hello Trivandrum! TRIVANDRUM TECHCON20

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

navigate! route from template:

Profile

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Try this out here.

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Wildcard route?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Router lifecycle let us understand the

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Give this a try here.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

navigate! but, wait!

Slide 22

Slide 22 text

Are we allowed to navigate? check for guards

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

Without route resolvers

Slide 27

Slide 27 text

resolvers prefetch component data during routing @DcoustaWilson

Slide 28

Slide 28 text

With route resolvers

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

{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

Slide 33

Slide 33 text

Lazy loading bundle difference

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Lazy load routes here.

Slide 37

Slide 37 text

Updates in the router (v7, v8, v9)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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