CS 5220 Advanced Topics in Web Programming Angular

CS 5220 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 Home About Component Login Home. Component App. Component Login Component

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

App. Routing. Module import { Ng. Module } from '@angular/core'; import { Routes, Router. Module } from '@angular/router'; const routes: Routes = []; @Ng. Module({ imports: [Router. Module. for. Root(routes)], exports: [Router. Module] }) export class App. Routing. Module { }

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

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

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

Basic Routing const routes: Routes = [ { path: 'block 1', component: Block 1 Component }, { path: 'block 2', component: Block 2 Component } ]; In template: <a router. Link="block 1">Block 1</a> <a router. Link="block 2">Block 2</a>

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

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

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

Wildcard Route const routes: Routes = [ { path: 'about', component: About. Component }, { path: 'login', component: Login. Component }, { path: '**', component: Page. Not. Found. Comp} ]; Catch un-matched routes and display a Page. Not. Found page (i. e. component) Route order matters so make sure the wildcard route is listed last

Navigate to Route in Code Example: click a button in Block 1 to go to Block 2 class Block 1 Component { constructor(private router: Router) {} } go. To. Block 2(): boolean { this. router. navigate( ['block 2'] ); return false; }

Dependency Injection Things to inject: services and data Declare in providers of Ng. Module Inject in constructors

Dependency Injection: Providers Type Token providers: [ { provide: User. Service, use. Class: User. Service }, { provide: 'SECRET', use. Value: 'abcd' } ] String Token providers: [ User. Service, { provide: 'SECRET', use. Value: 'abcd' } ]

Dependency Injection: Inject Class Home. Component { constructor( private User. Service: user. Service, @Inject('SECRET') private secret: string ) {} }

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: 'block 1/: id', component: Block 1 Component } ]; In template: <a router. Link="block 1/1">Block 1</a> <a [router. Link]="['block 1', 1]">Block 1</a> In component class: this. router. navigate(['block 1', 1]);

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

Specify Query Parameters <a router. Link="block 2'' [query. Params]="{id: 1}"> this. router. navigate( ['block 2'], { query. Params: { id: 1 } } );

Retrieve Information from Route Inject an Activated. Route in component constructor Subscribe to params (for both route and matrix parameters) or query. Params or fragment in ng. On. Init() Unsubscribe in ng. On. Destroy()

Observable and Subscription Activated. Route. params is a Observable An Observable represents a set of values that change over time A Subscription allows a subscriber to be notified whenever the values of an observable change

Asynchronous Programming Paradigms Callback Function for event handling Observable for continuously changing data / data stream Promise for something that eventually produces a single result

Why "Subscribing" to Parameters? Add console. log() in ng. On. Init() and ng. On. Destroy() 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 const routes: Routes = [ { path: 'block 1', component: Block 1 Component }, ]; { path: 'blockx', redirect. To: 'block 1', path. Match: 'full'} path. Match can be either 'prefix' (default) or 'full'

Children Routes { } path: 'block 3', component: Block 3 Component, children: [ { path: 'block 4', component: Block 4 Component }, { path: 'block 5', component: Block 5 Component } ]

Named Router Outlet Template: <router-outlet> <router-outlet name="other"></router-outlet> Routes: { } path: 'block 6', component: Block 6 Component, outlet: 'other'

Load Component to a Named Outlet <a [router. Link]="[{outlets: {other: ['block 6']}}]"> Block 6 </a> Instead of from path to routes to component to outlet, it's more like from outlet to routes to path to component

Route Guard Determine whether a user can navigate to or away from a route Types of route guard n n Can. Activate: navigate to a route Can. Activate. Child: navigate to a child route Can. Deactivate: navigate away from a route Can. Load: used for lazy-loaded modules

Add A Route Guard Use Angular CLI to generate a guard n Naming conventions Add it to providers in @Ng. Module Add it to the route that needs to be protected, e. g. { } path: 'block 7', component: Block 7 Component, can. Activate: [Can. Activate. Guard]

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

Resolve Guard Resolve guard is used for retrieving some data before a route is activated

Readings Angular Router by Victor Savkin