Routing in Angular App - lakshmansha/ngAngularPractices GitHub Wiki

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will Routing in Angular App.

Pre-requisites:

The pre-requisites are

Node.JS - Click Here
Angular CLI - Click Here
VS Code - Click Here

Check this out

To know how to Handle Back-Forth Page Routing - click here
To understand how to Structure your Angular App - click here

Route

There are certain things to remember when creating routing,

At First, we need to place our routing module at the end of the imports array like below,

imports: [
    BrowserModule,
    HttpClientModule,
    BlockUIModule.forRoot(), // Import BlockUIModule
    ...
    AppRoutingModule
  ],

If not, your routing may break your application routing flow.

Make use of all elements as required as possible.

Some properties as below,

data

Helps to send data to the component via routing

resolve

Helps to retrieve or fetch data required for component via API.

canActivate

Helps to restrict page visibility based on certain criteria.

If you are working with a module-based Structure, Kindly declare routes within the module.

Kind notice, please don't navigate the pages via window.location.href use RouterModule's Router for navigation, which stores the location history like below,

import { Router } from '@angular/router';
...
  constructor(private route: Router) { }
  ...
  ToPage(page: string) {
    this.route.navigate([page]);
  }
...

That wraps up the Routing in Angular App

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.