[Part-4] Routing for navigation in Angular

Hello friends, today let us see how routing works in angular. Friends this is a quite complex concept. I will try my best to explain this topic to you bit easily.

Routing :

It is used to move from one page to another page.

We have already created one simple project of single page in previous article as shown below.

• So basically when we enter value in textbox and click the Click button, the browser will pop up an alert box displaying that name.
• Friends to understand it properly please go through my previous articles. I have tagged the link at the end.
• I have made some small changes in previous code, i.e. I have renamed the app folder and all files in that folder as PatientApp.
• While renaming the files or folders you will get the following message. Just click on Yes.

• Also I have created one more UI or page naming PatientHomePage which will contain some basic information of the app.
• Remember along with .html file, you also need to create .ts file for new page. Other files are not necessary now.
• To create this new page, copy .html and .ts files of PatientApp and paste them in the same folder. And then change their names also modify the inner content.

• Remember, if the file names are in red color then there are some errors which you need to solve.
• In above case the error is due to the renaming of files or folders. You just need to replace the previous words inside the file with the new names that you have given.
• Now let us create a link and a button such that if we click any one of them the browser will redirect us to PatientHomePage and vice versa.

How to achieve routing in angular ?

Step -1 :

• First I have changed the UI of PatientApp page as shown below :

• And to do this, I have written the code in PatientApp.component.html page is as below :

• Friends, to understand this you have to first learn about HTML. You can get knowledge about HTML through www.w3school.com website.

Step -2 :

• Routing is a collection of url and where to go.
• Now let us create separate folder under src folder for routing and in that create a file named PatientRouting.ts.
• And let us set the code for routing as I have shown below :

• As you can see we have a class PatientRoutes which is constant(const). We put constant since our routing or navigation should be constant.
• It is not compulsory to make it constant but it is good practice to make it constant.
• When the path is Home the component must be PatientHomeComponent and for patient it should be PatientComponent. You need to import this components as shown on the top of the code.

Step -3 :

Friends, remember in angular while navigating from one page to another, the previous page is not unloaded.

• You need to create one more page say master page which will act as a shell or canvas.
• In this shell you can load the respective pages as per your requirements.

Shell or Canvas in Angular

• So now let us create one new page i.e. PatientMasterPage. In this make appropriate changes. Now .html file of this page will have a <router-outlet>.
• <router-outlet> is an angular defined area using which pages loaded and unloaded in shell.

Step -4 :

As you know we have created PatientRouting.ts file under Routing folder. So to use it inside PatientApp we need to import router module of angular in module.ts file.

Step -5 :

Now let us go to the PatientApp’s .html file and make small change to link. So as you know link has href attribute. But now to use routing we have to use router link instead of href.

• Use the same thing to redirect from PatientHome page to PatientApp page.

Step -6 :

Now in PatientRouting.ts let us mention which component should be loaded on localhost i.e when there is nothing any URL.

• As you can see above when we run our application we will see the home page.

Step -7 :

So friends we have 3 pages and each page have view and component. Additionally for PatientApp page we have a module.

• When applcation run we want our master page to be loaded. So we will make that change in PatientApp.module.ts page.
• Also now we have 3 components so in declarations of module page we will add two remaining components.

Step -8 :

Now let us run the application and see whether it is working or not.

• When application run in browser, it will display Home page as shown below.

• If we click on go to patient link, we can see the below page :

• If we again click on go to home link, shell will again load home page.
• Remember, here the main screen is shell screen which have text “This is shell”, and while navigating through the pages it never disappear.

Friends, as I said you may not understand this in one go so practice it thoroughly. I hope you will find this post useful. Thank You !

[Part-1] Introduction to Angular

[Part-2] Directives and DOM in Angular

[Part-3] Camel case and Pascal case

[Part-4] Routing for navigation in Angular

If you want to learn more about angular in a hour please go through the below video :