Nested Routing in Single Page Applications

Single Page Applications 

- loading one template to another template without refreshing the whole web page called as Single Page Application.

- loading one template to another template in Single Page Application called as Routing.

- We will implement the Routing by using predefined Array called as "Routes"

- "RouterModule" is the Predefined Module used to load the "Routes"

- "Router" is the Predefined Class used to define the Dynamic URL'S.

- "Routes" , "RouterModule" & "Router" available in "@angular/router" module.

Step 1:
-------
create the angular application

> ng new SPADemo1


Step 2:
Generate the Components By using Following Command.

             > ng g c components/index

        > ng g c component/pageone

        > ng g c components/pagetwo

        > ng g c components/pagethree


"g" stands for "generate"

"c" stands for "component".

where "IndexComponent" is the "Master / Source / Landing" Component.

where "pageoneComponent", "pagetwoComponent" & "pagethreeComponent" are "target" component.

above command will generate the following files.

1) style sheet (css file)

2) external template (html file)

3) unit testing file  (spec file)

4) component file (.ts file)

Step 3:
create the hyperlinks in master template (Presentation Logic)

index.component.html


<a [routerLink]="['/']"><b>Page_One</b></a>

<a [routerLink]="['/page_two']"><b>Page_Two</b></a>

<button (click)="clickMe()"><b>Page_Three</b></button>

<br><br>

<router-outlet></router-outlet>

- [routerLink] is the directive used to load the target templates without refreshing
  the whole webpage.

- ['/'] representing default page in single page application.

- <router-outlet></router-outlet> used to hold the target templates.


index.component.ts

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

import { Router } from "@angular/router";

@Component({

  selector: 'app-index',

  templateUrl: './index.component.html',

  styleUrls: ['./index.component.css']

})

export class IndexComponent implements OnInit {

  constructor(private _router:Router) { }

  ngOnInit() {

  }

  public clickMe():any{

    this._router.navigate(["/page_three"])

  }

}

- Router is the Predefined class used to define the Dynamic URL'S.

- where "/page_three" is the Dynamic URL.


Step 4:
implement the Components logic.

pageone.component.html

<h1>{{var_one}}</h1>

pageone.component.ts

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

@Component({

  selector: 'app-pageone',

  templateUrl: './pageone.component.html',

  styleUrls: ['./pageone.component.css']

})

export class PageoneComponent implements OnInit {

  private var_one:any;

  constructor() {

    this.var_one="Coming from Page One";

  }

  ngOnInit() {

  }

}

pagetwo.component.html

<h1>{{var_two}}</h1>

pagetwo.component.ts

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

@Component({

  selector: 'app-pagetwo',

  templateUrl: './pagetwo.component.html',

  styleUrls: ['./pagetwo.component.css']

})

export class PagetwoComponent implements OnInit {

private var_two:any;

  constructor() {

    this.var_two= " Coming from Page Two Component";

   }

  ngOnInit() {

  }

}

pagethree.component.html

<h1>{{var_three}}</h1>

pagethree.component.ts

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

@Component({

  selector: 'app-pagethree',

  templateUrl: './pagethree.component.html',

  styleUrls: ['./pagethree.component.css']

})

export class PagethreeComponent implements OnInit {

  private var_three:any;

  constructor() {

    this.var_three = " Coming from Page Three Component"

  }

  ngOnInit() {

  }

}

Step 5:
Define the Routings.

***********************
app
   routes
app.routes.ts
***********************
app.routes.ts
---------------

import { PageoneComponent } from "../components/pageone/pageone.component";

import { PagetwoComponent } from "../components/pagetwo/pagetwo.component";

import { PagethreeComponent } from"../components/pagethree/pagethree.component";

import { Routes } from "@angular/router";

export const appRoutes:Routes = [

    { path:"" , component:PageoneComponent },

    { path:"page_two", component: PagetwoComponent },

    { path:"page_three", component: PagethreeComponent },

];

Step 6:

load Routing by using "RouterModule"


app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { IndexComponent } from './components/index/index.component';

import { PageoneComponent } from './components/pageone/pageone.component';

import { PagetwoComponent } from './components/pagetwo/pagetwo.component';

import { PagethreeComponent } from'./components/pagethree/pagethree.component';

import { appRoutes } from "./routes/app.routes";

import { RouterModule } from "@angular/router";

@NgModule({

  declarations: [

    AppComponent,

    IndexComponent,

    PageoneComponent,

    PagetwoComponent,

    PagethreeComponent

  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot(appRoutes)

  ],

  providers: [],

  bootstrap: [IndexComponent]

})

export class AppModule { }

index.html

<body>

<app-index></app-index>

</body>

Nested Routing in Single Page Applications:

- Routing in Nested Manner Called as Nested Routing.


Step 1:
genarate the component by using following command


        > ng g c components/childone

        > ng g c components/childtwo

        > ng g c components/childthree


Step 2:
implement the logic in child components.


childone.component.html

<h2 style="color:chartreuse">{{var_four}}</h2>

childone.component.ts

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

@Component({

  selector: 'app-childone',

  templateUrl: './childone.component.html',

  styleUrls: ['./childone.component.css']

})

export class ChildoneComponent implements OnInit {

  private var_four:any;

  constructor() {

    this.var_four = "Coming from Child One Component";

  }

  ngOnInit() {

  }

}

childtwo.component.html

<h2 style="color: brown">{{var_five}}</h2>

childtwo.component.ts

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

@Component({

  selector: 'app-childtwo',

  templateUrl: './childtwo.component.html',

  styleUrls: ['./childtwo.component.css']

})

export class ChildtwoComponent implements OnInit {

  private var_five:any;

  constructor() {

    this.var_five = "Coming from Child Two";

  }

  ngOnInit() {

  }

}

childthree.component.html

<h2 style="background: bisque; color: blue">{{var_six}}</h2>

childthree.component.ts

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

@Component({

  selector: 'app-childthree',

  templateUrl: './childthree.component.html',

  styleUrls: ['./childthree.component.css']

})

export class ChildthreeComponent implements OnInit {

  private var_six:any;

  constructor() {

    this.var_six = "Coming from Child Three Component";

  }

  ngOnInit() {

  }

}

Step 3:

------
Define the Child HyperLinks


pageone.component.html

<h1 style="color: rebeccapurple">{{var_one}}</h1>

<a [routerLink]="['child_one']"><b>Child_One</b></a>

<br><br>

<router-outlet></router-outlet>


pagetwo.component.html

<h1 style="color: rebeccapurple">{{var_two}}</h1>

<a [routerLink]="['child_two']"><b>Child_Two</b></a>

<br><br>

<router-outlet></router-outlet>


pagethree.component.html

<h1 style="color: rebeccapurple">{{var_three}}</h1>

<a [routerLink]="['child_three']"><b>Child_Three</b></a>

<br><br>

<router-outlet></router-outlet>




Step 4:
    implement the child routes


routes -->  app.routes.ts

import {PageoneComponent } from "../components/pageone/pageone.component";

import {PagetwoComponent } from "../components/pagetwo/pagetwo.component";

import { PagethreeComponent } from "../components/pagethree/pagethree.component";

import { Routes } from "@angular/router";

import { ChildoneComponent } from "../components/childone/childone.component";

import { ChildtwoComponent } from "../components/childtwo/childtwo.component";

import { ChildthreeComponent } from "../components/childthree/childthree.component";

export const appRoutes:Routes = [

    { path:"" , component:PageoneComponent,

        children : [{path:"child_one", component:ChildoneComponent}] },

    { path:"page_two", component:PagetwoComponent,

        children : [{path:"child_two", component:ChildtwoComponent}] },

    { path:"page_three", component:PagethreeComponent,

        children : [{path:"child_three", component:ChildthreeComponent}] },

];

Output