Routing in Angular

Hey guys! Today I'm going to give you some knowledge on Routing via browser URLs in Angular. 

What is routing? Simply, routing is the way to navigate among the components in Angular. There should be a proper interaction among components in this framework. 

As an example, think that you want to show the employees list when you click on a button called show employees. When you click, the URL should be changed and the relevant data should be displayed. This is the process.. Got it? The most important thing is we can do this without refreshing the web page in Angular unlike in PHP since Angular is developing SPAs(Single Page Applications). 

Are you ready to go? Let's start!

Creating an Angular project is the very first step..Here I will not explain it.. If you want, visit here..
start-your-first-angular-4-project

Step 1

Go into project folder from cmd and create two components called home and user-list. You can use any name you want.
ng g c home
ng g c user-list

Open the project in VS Code and look at the file structure now.. There will be two folders with the above names. Now open app.module.ts file. These two components are already imported and added to the declarations by Angular itself!

Step 2

Create a new file called app-routing.module.ts here, manually => Project/src/app
Keep the name in the way I have given..It's kind of an standard way to name the Routing Module for a project.

Now we have to import the RouterModule, NgModule and the newly created two components into the app-routing.module TypeScript file. When we are going to create routes, we need these two components..That's why we import them.

Then declare an array to configure routes. Then include all the paths for the routes using component interactions. See the below code. Copy and paste in this file.

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';

import { UserListComponent } from './user-list/user-list.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'home', component: UserListComponent}
];

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

export class AppRoutingModule {

}

Step 3

Import the routing module into app module TS file

import { AppRoutingModule } from './app-routing.module';

Then include the module in the imports section also.

imports: [     
    BrowserModule,
    AppRoutingModule,
    FormsModule
]

Step 4

This is the most important part! We need to include a simple code line to bind the routes to the entire project! Open app.component.html file and place this line.
<router-outlet></router-outlet>

<div style="text-align:center; margin-top: 30px;">
  <h1>
    Welcome to {{ title }}
  </h1>
</div>
<br>
<router-outlet></router-outlet>

Step 5

According to our paths, we navigate to HomeComponent, when URL is not having any segments.. It means when we type just localhost:4200 in web browser, HomeComponent should be loaded! Then it's HTML file is home.component.html..Now open this HTML file and place this code.

<div class="container" style="margin-top: 30px;">
  <p class="text-center">
      <a routerLink="users">Link to users list</a>
  </p>
</div>

routerLink tag is the connector to an external path in Angular. I have placed the word home since I have configured the path for Root like this. See again the paths included in app-routing.module.ts file.
Now run your project using command prompt!
ng serve -o

Now the route for users list is set!

Step 6

Now we need to configure the UserListComponent to be displayed in the browser, when we click on the link in the home.component.html file. For this we have to edit the template reserver for UserListComponent. Open the user-list folder..There's a template file called user-list.component.html.. Open this in the editor and place this code.

<div class="container">
    <div class="row">
      <div class="col-lg-3"></div>
      <div class="col-lg-6">
        <h4 class="text-center">List of Users</h4><br>
        <table class="table table-bordered">
          <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Job</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Salitha</td>
              <td>Web Developer</td>
            </tr>
            <tr>
                <td>2</td>
                <td>TechPool</td>
                <td>UI Designer</td>
              </tr>
          </tbody>
        </table>
      </div>
      <div class="col-lg-3"></div>
    </div>
    <br>
  </div>

Ok guys! Now go back into localhost:4200 typing the URL in browser. Click on the link available in the view now!!

What Happened? Got a user table?

If you are getting the view like the below one, you are all set with routing using Angular!

You can see the URL has been changed from localhost:4200 to localhost:4200/users. Views are loaded fast

WITHOUT PAGE REFRESH! 

This is why Angular Routing is so fast! It renders the component without refreshing the web pages..
You can create many components, add route paths and link in the templates continuously and make an interactive + fast web application!

So this is the end of Routing Tutorial..Hope you got some knowledge to handle your web application with routing options..I will more focusing on this Amazing framework future. Untill meeting with another article,

Good Bye guys!