Learn Angular Step By Step In Easy Way(URL Routing In Angular)

Description

In this article we gonna learn routing using angular 7(routing will be same for angular 2 and above versioning till now). When we talk about url routing it means redirecting from one page to another page. Every framework have his own way to do so. And it is one of the most important concept of any framework. In anuglar 7 when we start new project using cli its automatically asked at the time of project setup for url routing(if you want to do url routing, yes or no). If you choose yes it will automatically created a file named as app-routing.module.ts, otherwise in earler version of angular you have to create this file of your own. So let's don't waste any time to start with url routing in angular.

Step 1

In my previous article i have shared the steps to start up with angular setup. If you missed that article just go through that -:

Learn Angular Step By Step In Easy Way - Chapter One

Because you can't start with second step when you missed first step. So first what we will do is create new pages in our site. I will start from where we left last(first article). So our setup is done and our application is running. So let's create two new componet(about and contact us). We will create it with cli command to create new componet. To create a new componet, write below command -:

ng generate component YOURCOMPONENTNAME //This is the way we will create
ng g c aboutus //In short we can use command like this.

The same we will create contactus component,

So we have created two componet now. But we can't access them directly because we don't described routing for those yet. So if i run application right now it will be like below,

We having only this page right now on browser window, as we have already added two new component, but we can't access them till we fix routing.

Step 2

So let's add app-routing.module.ts file in our application. As i told you i am using angular 7 so this file already created in my application.and it should look like below,

if you don't have this file then create this file and add above code in this file. So le't add url routing code in this file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';
const routes: Routes = [
{ path: 'aboutus', component: AboutusComponent },
{ path: 'contactus', component: ContactusComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

As we can see i have added above code, and mentioned about us and contact us in Routes. In there corresponding i have added the component which i want to render or show. So we just added the configure the code for routing. Next step to show about us and contact us in menu bar with link to redirects.

Step 3

Go to app component(app component if that component mentioned in bootstraping, which mean the first componet to load) to add about us and contact us in menu bar.

<div style="text-align:center">
<h1>
Welcome to Angular, let's start with url routing!
</h1>
</div>
<ul>
<li><a [routerLink]="['/aboutus']">About Us</a></li>
<li><a [routerLink]="['/contactus']">Contact Us</a></li>
</ul>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>

We have added about us and contact us in menu bar with routerLink(just like href in simple terms). We have given the same name as we written in routes file here. Name should be same else routes will not be found and redirection will not gonna work. Its case sensitive so make sure both name are same. You can also use NavigateByUrl in angular to redirect from one page to another. We will come on that in future. For now we just configure the url setting for about and contact us page. Now time to run the application,

Click on About Us,

Click on Contact Us,

So our routing is working fine, now we can create as much comoponet pages we want(I have implement some css here in menu).

I have written another article related to URL routing and backslash in URL routing in angular, you can go through it from the below link,

Angular 7 Routing And Preserving Trailing Slash In URL

So tha'ts it for now, in future we will cover our other topics related to angular as well as lazy loading and parameter url routing. Till then work hard, party harder ;)