Basic Routing in Angular

Angular application is a Single Page Application(SPA) that means all of our views are displayed within one page.How do we manage which view to display when that's the purpose of Routing.We define routes to navigate between multiple views in our angular application.

So for example suppose user selects a Menu option to display a product list then a product list route is activated and displays it's view.

We will start with single app component that has two routes. We will have a home view and a product-list view.

There are three steps to perform a basic routing:

1. Configuring Routes
2. Tie a Route to each Action
3. Placing the view

Before proceeding to routing, lets have a look at our two components first.

1st Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h2>Home</h2>`
})
export class HomeComponent { }



2nd Component:

import { Component } from '@angular/core';

@Component({
  selector: 'product-list',
  template: `<h2>product-list</h2>`
})
export class ProductListComponent { }

So we can see that our two components are very simple just displaying some text. Now lets start routing these two components.

1. Configuring Routes: (app.module.ts)

An Angular application has one router that is manage by angular's router service and we know that when we used the service we have to register the service provider in angular module.So first register the router service and after that make sure that routes are available to the application,we do this by passing the routes to router module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProductListComponent } from './products/product-list.component';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
     RouterModule.forRoot([
      {path:'products',component:ProductListComponent},
      {path:'',component:HomeComponent}
   
    ])

  ],
  declarations: [
    ProductListComponent,
    HomeComponent,
    AppComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

So lets see what this code is doing

  RouterModule.forRoot([
      {path:'products',component:ProductListComponent},
      {path:'',component:HomeComponent}

    ])

Notice here that we:

• use path to specify the URL
• we specify the component we want to route to
• for each route we specify the path and reference to the component

So we are done with the first step.Also don't forget to define a base element in the head tag of our index.html file.This tells the router how to go through the navigation Url.

<base href ="/">

2. Tie a Route to each Action : (app.component.ts)

If we want to navigate between routes, we use the RouterLink directive

import { Component } from '@angular/core';

import {ProductListComponent} from './products/product-list.component';
import { HomeComponent } from './home.component';


@Component({
  selector: 'app-root',
  template: `

 <a [routerLink]="['/']">Home</a>

 <a [routerLink]="['/products']">Product List </a>


  `
})
export class AppComponent { }

The argument to router-link is an array with the route name as the first element (e.g. "['home']" or "['products']"). This indicates which route to navigate to when we click the element.

3. Placing the view :(app.component.ts)

The RouterOutlet directive tells our router where to render the content in the view.

import { Component } from '@angular/core';
import {ProductListComponent} from './products/product-list.component';
import { HomeComponent } from './home.component';


@Component({
  selector: 'app-root',
  template: `
 <a [routerLink]="['/welcome']">Home</a>
 <a [routerLink]="['/products']">Product List </a>

   <div class='container'>
   <router-outlet></router-outlet>
   </div>

  `
})
export class AppComponent { }

Then whenever we switch routes, our content will be rendered in place of the router-outlet tag.

There we go! That’s more-or-less all the basics you need to know to get routing up and running for Angular.