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


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

Output