Single Page Application in Angular 2, 4, 5 & 6

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.




Ex_1:
-----

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

> ng g c component/childone

> ng g c component/childtwo

> ng g c component/childthree


 "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)

 - 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.

app.component.html

<div style="text-align:center">

  <h1>

    Welcome to {{ title }}!

  </h1>

</div>

<h2>Here are some links to help you start: </h2>

<ul>

  <li>

    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>

  </li>

  <li>

    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>

  </li>

  <li>

    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>

  </li>

</ul>

app.component.ts

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'app';

}

Step 5:

        Define the Routings.

***********************

app

   routes

      app.routes.ts

***********************

app.routes.ts

---------------

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}] },

];

components/index/index.components.html

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

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

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

<br />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-outlet></router-outlet>

components/index/index.components.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"])

  }

  

}

components/pageone/pageone.components.html

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

<a [routerLink]="['child_one']">Child One</a>

<br />

<router-outlet></router-outlet>

components/pageone/pageone.components.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 Component";

  }

  ngOnInit() {

  }

}

components/childone/childone.components.html

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

components/childone/childone.components.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() {

  }

}

components/pagetwo/pagetwo.components.html

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

<a [routerLink]="['child_two']">Child Two</a>

<br />

<router-outlet></router-outlet>

components/pagetwo/pagetwo.components.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() {

  }

}

components/childtwo/childtwo.components.html

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

components/childtwo/childtwo.components.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() {

  }

}

components/pagethree/pagethree.components.html

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

<a [routerLink]="['child_three']">Child Three</a>

<br />

<router-outlet></router-outlet> 

components/pagethree/pagethree.components.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() {

  }

}

components/childthree/childthree.components.html

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

components/pagethree/pagethree.components.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 6:

 load Routing by using "RouterModule"

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";

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

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

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

@NgModule({

  declarations: [

    AppComponent,

    IndexComponent,

    PageoneComponent,

    PagetwoComponent, 

    PagethreeComponent, ChildoneComponent, ChildtwoComponent, ChildthreeComponent

  ],

  imports: [

    BrowserModule,

    RouterModule.forRoot(appRoutes)

  ],

  providers: [],

  bootstrap: [IndexComponent]

})

export class AppModule { }

index.html

<html lang="en">

    <app-index></app-index>

</html>

OUTPUT

Onclick on Child One link will display inside the child one html Content

Page Two

Page Three