Routing & Navigating Pages in Angular 2

Routing & Navigating
Pages in Angular 2
By :-
Deepak Mehra
Software Consultant
KNOLDUS SOFTWARE LLP
By :-
Deepak Mehra
Software Consultant
KNOLDUS SOFTWARE LLP

Agenda
● Why routing is necessary
● Define routes for pages
● Link to Routes
● Navigate from Code
● Route Guards
● Route Based Link Styling
● Lazy Loading
● Code Clean Up

Why routing is necessary?
● Routing helps in directing users to different
pages based on the option they choose on the
main page. Hence, based on the option they
choose, the required Angular Component will
be rendered to the user.

Define routes for pages
● Now, before you define routes for pages. Let’s see
● <base href>
● Most routing applications should add a <base> element to
the index.html as the first child in the <head> tag to tell the
router how to compose navigation URLs.
●
● Step 1 − Add the base reference tag in the index.html file.
● <html>
● <head><base href=”/”></head>

Define routes for pages
● Before we define define routes for the pages, Let’s create files for the
pages.
For example
Let’s create Inventory.component.ts and Product.component.ts and
write simple logic like below
import {Component} from '@angular/core';
@Component ({ selector: 'app-root',template: '<h1>Inventory</h1>'})
export class InventoryComponent {}

Link to Routes
● The RouterLink directives on the anchor tags give the
router control over those elements. The navigation paths
are fixed, so you can assign a string to the routerLink (a
"one-time" binding).
That is how you navigate from one page to another
<a routerLink="/product"
routerLinkActive="active">Product</a>

Adding an error route
● We can also add an error route. In Routing, one can also add an
error route. This can happen if the user goes to a page which does
not exist in the application.
Step1. Add a PageNotFound component as NotFound.component.ts.
Step2. {path: '**', component: PageNotFoundComponent}
** is for any route which does not fit the default route. They will be
directed to the PageNotFoundComponent component.

Navigate from code
● Of course, You can navigate from page to another using code.
Let’s see How do we do that.
We will need to inject router in the constructor and call navigate
function.
export class TestComponent {constructor(private router:
Router) {}
back() {
this.router.navigate(['/']);}}

Route Guards
● Sometimes we want to prevent a user from
going to a particular page or discourage them
from leaving a page. That’s what route guards
are designed for.
Route guards have two properties
1. Can Activate
2.Can Deactivate

Route Guards
2. Can Deactivate
We can use ‘Can deactivate’ to prevent a user
from leaving a page. This is often helpful when
a user is leaving the page before saving the
data.

Route Based Linking Style
● If you have a header in your website and you want to
highlight the currently active link then you can do that by
using “routerLinkActive”
Step1 . <li><a routerLink="/home"
routerLinkActive="active">Home</a></li>
Step2. Add css
#nav-bar li > a.active {
color: black;

Lazy Loading
● So far our app has only one module and that
is app module. Let’s see how we can add
multiple module.
Our application can be broken down into
smaller sections. We will add in a user
module.

Code Cleanup
● In order to clean up the code, we can expose all of the
imports inside the directory from a single index file and
then we can just import it with a single import line. This
is referred to as creating barrells.
Step 1. Create an index file.
Export * from ‘./test.component’
Step 2. In app module
Import {
} from ‘./index’

References
● https://github.com/angular/angular-cli
● https://angular.io/docs

Routing & Navigating Pages in Angular 2

In this document

More Related Content

What's hot

Similar to Routing & Navigating Pages in Angular 2

More from Knoldus Inc.

Recently uploaded

Routing & Navigating Pages in Angular 2