CS5220 Advanced Topics in Web Programming Angular – Routing Chengyu Sun California State University, Los Angeles

The Need for Routing Usually we have different pages in a web application How do we have different "pages" in a SPA? Home About Login

Angular Routing Load different components based on different URL About Login Component Home About Login HomeComponent AppComponent

Add A Routing Module The routing option of ng new Add an AppRoutingModule Import the routing module in AppModule Add a <router-outlet> in App component template, which is a placeholder for the components to be loaded.

AppRoutingModule import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

RouterModule RouterModule.forRoot(routes) returns a RouterModule that is configured with routes AppRoutingModule imports this module, then exports it so the rest of the application can use it You can specify routing directly in AppModule, but using an AppRoutingModule is recommended (for centralizing route management in large applications)

The forRoot() Convention forRoot() returns a module that should be imported by the root module (i.e. the module used for bootstrapping the application) Use forChild() if you want to add routing to a feature module

Routes Routes specify the mappings between paths and components, e.g. const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'login', component: LoginComponent } ];

Basic Routing const routes: Routes = [ { path: 'block1', component: Block1Component }, { path: 'block2', component: Block2Component } ]; In template: <a routerLink="block1">Block 1</a> <a routerLink="block2">Block 2</a>

Why routerLink instead of href? See the difference using Chrome's Developer Tools (Network tab) Clicking on a routerLink does NOT send a request – the address URL is changed through HTML5 history API

routeLink as @Input <a routerLink="block1">Block 1</a> Link is hard-coded in template <a routerLink="block1">Block 1</a> Allow setting link with dynamic data from code <a [routerLink]="'block1'">Block 1</a> <a [routerLink]="['block1']">Block 1</a>

Route Segments <a routerLink="user/bob">Bob</a> <a [routerLink]="['user', name]">{{name}}</a>

Wildcard Route const routes: Routes = [ { path: 'about', component: AboutComponent }, { path: 'login', component: LoginComponent }, { path: '**', component: PageNotFoundComp} ]; Catch un-matched routes and display a PageNotFound component Route order matters so make sure the wildcard route is listed last

Navigate to Route in Code Example: click a button in Block1 to go to Block2 class Block1Component { constructor(private router: Router) {} goToBlock2(): boolean { this.router.navigate( ['block2'] ); }

Attach Information To Route Path parameters, e.g. /user/:id Matrix parameters, e.g. /user;fn=John;ln=Doe Query parameters, e.g. /user?id= Path fragment, e.g. /user#profile

Specify Route Parameters const routes: Routes = [ { path: 'block1/:id', component: Block1Component } ]; In template: <a routerLink="block1/1">Block 1</a> <a [routerLink]="['block1', 1]">Block 1</a> In component class: this.router.navigate(['block1', 1]);

Specify Matrix Parameters <a [routerLink]="['block1',{x:10, y:20}]''> this.router.navigate([ 'block1', {x:10, y:20} ]);

Specify Query Parameters <a routerLink="block2'' [queryParams]="{id: 1}"> this.router.navigate( ['block2'], { queryParams: { id: 1 } } );

Specify Path Fragment <a routerLink="block2'' fragment="anchor"> this.router.navigate( ['block2'], { fragment: 'anchor' } );

Retrieve Information from Route Inject an ActivatedRoute in component constructor Subscribe to params (for both route and matrix parameters) or queryParams or fragment in ngOnInit() Unsubscribe in ngOnDestroy()

Example: Getting Parameters constructor( private router: Router, private route: ActivatedRoute ) {} ngOnInit() { this.paramsSub = this.route.params.subscribe( params => { this.id = params['id'] || 0; this.x = params['x']; this.y = params['y']; }); }

Why "Subscribing" to Parameters? Add console.log() in ngOnInit() and ngOnDestroy() to see when a component is initialized/destroyed Angular reuses components to improve performance, so the same component instance needs to handle changing parameters

Redirect pathMatch can be either 'prefix' (default) or 'full' const routes: Routes = [ { path: 'block1', component: Block1Component }, { path: 'blockx', redirectTo: 'block1', pathMatch: 'full'} ]; pathMatch can be either 'prefix' (default) or 'full'

Children Routes { path: 'block3', component: Block3Component, children: [ { path: 'block4', component: Block4Component }, { path: 'block5', component: Block5Component } ] } Children components would appear in the <router-outlet> in the parent

Named Router Outlet Template: <router-outlet><router-outlet> <router-outlet name="other"></router-outlet> Routes: { path: 'block6', component: Block6Component, outlet: 'other' }

Route Guard Determine whether a user can navigate to or away from a route Types of route guard CanActivate: navigate to a route CanActivateChild: navigate to a child route CanDeactivate: navigate away from a route CanLoad: used for lazy-loaded modules

CanDeactivate CanDeactivate guard is usually used to remind the user of something before the user navigates away from a component As such, it requires a component that displays a confirmation dialog

Add A Route Guard Use Angular CLI to generate a guard Add it to the route that needs to be protected, e.g. { path: 'block7', component: Block7Component, canActivate: [CanActivateGuard] } More examples in TechIT 2 Client

Readings Angular Router by Victor Savkin