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

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

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

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

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

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

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

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

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

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

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

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

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

14. 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'] );
return false; }

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

16. Dependency Injection: Providers
Type Token
providers: [
{ provide: UserService, useClass: UserService },
{ provide: 'SECRET', useValue: 'abcd' } ]
String Token
providers: [
UserService, { provide: 'SECRET', useValue: 'abcd' } ]

17. Dependency Injection: Inject
Class HomeComponent {
constructor(
private UserService: userService,
@Inject('SECRET') private secret: string
) {} }

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

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

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

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

22. 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()

23. Observable and Subscription
ActivatedRoute.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

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

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

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

27. Children Routes { path: 'block3', component: Block3Component,] }

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

29. Load Component to a Named Outlet
<a [routerLink]="[{outlets: {other: ['block6']}}]">
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

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

31. Add A Route Guard Use Angular CLI to generate a guard
Naming conventions
Add it to providers
Add it to the route that needs to be protected, e.g. {
path: 'block7', component: Block7Component,
canActivate: [CanActivateGuard] }

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

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

34. Readings
Angular Router by Victor Savkin