Introduction To Routing In Angular

Introduction

 

As with any other programming, language routing is used for the same purpose of switching between pages in the application. 

 

In this article, we will see:

1. Why do we need routing in Angular?
2. How to enable it?

Let's start without any irrelevant discussion because I don’t like it when I read someone else's article!!

 

The article may lengthy because I am trying to portrait it as sharing rather than teaching something.

 

Why do we need routing in Angular?

 

Angular is a framework that allows us to render single page applications. So if we know basic about Angular, to display any component we use its Selector

as shown below.

 

<app-shopping-list> is a selector of component and whatever HTML inside this component that  will render in this app.componant.html as we have written in the selector here:

<app-header ></app-header>
   <div class="container">
      <div class="row">
         <div class="col-xs-12">

            <app-shopping-list></app-shopping-list>

         </div>
   </div>
</div>

So like this, we can show multiple components in same .html file. Also, we can toggle between them by using conditions, as shown below.

<app-header ></app-header>
   <div class="container">
      <div class="row">
         <div class="col-xs-12">

            <app-shopping-list></app-shopping-list>
                      <app-shopping-cart></app-shopping-cart>
         </div>
      </div>
</div>

So everything goes well like this. Without routing, we are able to show different pages. Now what if you wanted to have a page where you actually display several pages, like you have a /users or a /cart page ?

 

Now we might think that we need multiple pages to achieve this or need multiple .html files.

 

Here, Angular shows it's capability! Angular deals with its own router which allow us to change URL in the URL bar and though the user thinks that he has changed the page

but the user will be on the same page. To achieve this, Angular changes a lot of things behind the scenes, which proves that Angular is a single page application world!

 

 

How to enable it?

 

So, now we need Routers in our angular app to switch between separate pages!

 

How to enable it?

 

So like any other language, we need to tell the Angular router that which router our front application has. So let's start add routing step by step.

 

Step 1

 

Let’s add routing in append where app.module.ts seems to be a good place as it is a global file for our app.

 

Add a CONSTANT variable to hold our routes as below which will be a type of Routes. Make sure to import this from @angular/router as below at top of the file.

import { Routes, RouterModule, ChildrenOutletContexts } from '@angular/router';
const appRoute: Routes =[]

appRoutes will be the array, which will hold our routes. (route will be just a JavaScript object for this variable)

 

So let's add some routes to our router variable values will be key: value pair as shown below.

const appRoute: Routes = [ {path:'',redirectTo:'/Home',pathMatch:'full'},
{path:'',redirectTo:'/Users',pathMatch:'full'},
{path:'',redirectTo:'/Shopping',pathMatch:'full'}
];

Step 2

 

So we somehow need to register these routes in our app and we do this by adding a new import here to this import array, we need to add the RouterModule here and this RouterModule should be imported from our @angular/router.

 

So with this added, we're adding the routing functionality to the app, but still, our routes are not registered.

 

That's why this RouterModule has a special method we can call, forRoot, which allows us to register some routes for our main application here.

@NgModule({
imports: [RouterModule.forRoot(appRoute)],
})

So forRoot will now receive our appRoutes constant here as an argument. With that, our routes are now registered in the Angular app.

 

Now Angular knows our routes.

 

Step 3

 

Assume the user has entered https://localhost:4200/Users here Angular knows we want to load the user's page but how does it know where to render it !!!

 

Now, we have to tell the boss you should show the routed pages at this place in DOM. To do that, there is a method!

 

Step 4

 

We don't add our component with its selector but lets usr a special directive dealing with Angular, the router-outlet. router-outlet is a special kind of directive provided by the Angular which will marks the place in DOM to render our routed component, as shown below:

<app-header ></app-header>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

So finally, Angular knows where to render the routed component!!!