Simple Angular 6 Routing and Single Page View Tutorial

Today, We want to share with you Simple Angular 6 Routing.In this post we will show you Angular 6 Router Tutorial Example From Scratch, hear for Angular 6 Router – An Introduction to Component Routing we will give you demo and example for implement.In this post, we will learn about Angular 6 Routing with Parameters with an example.

Simple Angular 6 Routing Example

There are the Following The simple About Simple Angular 6 Routing Full Information With Example and source code.

As I will cover this Post with live Working example to develop Simple Angular 6 Routing step By step, so the some major files and Directory structures for this example is following below.

Angular 6 Router Tutorial Example From Scratch

  • Simple Angular 6 Routing Module
  • Angular CLI for Install Angular 6
  • Create Angular Component
  • Install Bootstrap Package
  • Angular 6 Routing Settings
  • Includeing Navigation bar
  • Includeing ng2-slim-loading-bar in Angular
  • Router Events in Angular 6

Step 1 : Install Angular 6 using Angular CLI.

Angular CLI

//Angular CLI
npm install -g @angular/cli

//Angular 6 Create Project
ng new ng6routing

//Angular 6 start the application
ng serve --open

Simple Angular 6 Routing Compile & run
Angular 6 Project Compile and run http://localhost:4200

Step 2: Make Angular 6 components in Angular CLI.

There are the Following the make three components in angular 6 using Angular CLI.

ng g c components/aboutus
ng g c components/contactus
ng g c components/products

Angular-6-Routing-Example
Angular-6-Routing-Example

Step 3 : Package Install Bootstrap 4.

Simple Angular 6 Routing Installing….

npm i [email protected] --save

src >> index.html

<!-- index.html -->

<link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>

Step 4: Settings the Angular 6 Routing.

app.module.ts

// app.module.ts

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

 imports: [
    BrowserModule,
    RouterModule
  ],

app.module.ts

// app.module.ts

const routes: Routes = [
  {
    path: 'aboutus',
    component: NewsComponent
  },
  {
    path: 'contactus',
    component: MarketComponent
  },
  {
    path: 'products',
    component: ToolsComponent
  }
];

app.module.ts

// app.module.ts

//Simple Angular 6 Routing module
imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],

app.component.html

<!-- app.component.html -->

<router-outlet></router-outlet>

Step #5: Includeing Bootstrap 4 angular 6 Navigation bar.

app.component.html

<!-- app.component.html -->

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a routerLink="aboutus" class="nav-link">About Us</a>
      </li>
      <li class="nav-item active">
          <a routerLink="contactus" class="nav-link">products</a>
      </li>
      <li class="nav-item active">
          <a routerLink="products" class="nav-link">Products</a>
      </li>
    </ul>
  </div>  
</nav> <br />
<div class="container">
    <router-outlet></router-outlet>
</div>

aboutus.component.html

<!-- aboutus.component.html -->

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">About Us - Simple Angular 6 Routing</h5>
    <p class="card-text">
		InfinityKnow.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
    </p>
  </div>
</div>

contactus.component.html

<!-- contactus.component.html -->

<div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">products - Simple Angular 6 Routing</h5>
      <p class="card-text">
         Hello! I am angular Web-devloper and infinityknow is my web technologies blog. My specialities are Vuejs,API,angularjs,Vuejs,PHP, API, jQuery,Earn money,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development.
      </p>
    </div>
  </div>

products.component.html

<!-- products.component.html -->

<div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Pakainfo - Simple Angular 6 Routing</h5>
      <p class="card-text">
          Pakainfo is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
      </p>
    </div>
  </div>

Step 6: Install Lirary for ng2-slim-loading-bar.

Install Angular 6 and third-party packages

//install an ng2-slim-loading-bar

npm install ng2-slim-loading-bar --save


npm i rxjs-compat --save

app.module.ts

// app.module.ts

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    SlimLoadingBarModule
],

src >> styles.css

// styles.css

@import "../node_modules/ng2-slim-loading-bar/style.css";

Step 7: Includeing Router Events.

There are the Following Events For Simple Angular 6 Routing

  • Event
  • NavigationCancel
  • NavigationEnd
  • NavigationError
  • NavigationStart
  • Router

app.component.ts

// app.component.ts

import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
        Event,
        NavigationEnd,
        NavigationError,
        NavigationStart,
        Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) {
    this._router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this._loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this._loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this._loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this._loadingBar.stop();
    }
  }

}

app.component.html

<!-- app.component.html -->

<ng2-slim-loading-bar color="red"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a routerLink="aboutus" class="nav-link">About Us</a>
      </li>
      <li class="nav-item active">
          <a routerLink="contactus" class="nav-link">contactus</a>
      </li>
      <li class="nav-item active">
          <a routerLink="products" class="nav-link">Products</a>
      </li>
    </ul>
  </div>  
</nav> <br />
<div class="container">
    <router-outlet></router-outlet>
</div>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Single Page Apps with Angular 6 Routing and Templating .
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Angular 6 CRUD Tutorial Example From Scratch
  2.   PHP Jquery Ajax CRUD Example Tutorial From Scratch
  3.   How to return view with flash message in Laravel 6?
  4.   MySQL Full Text Search Laravel Tutorial With Example
  5.   Vue.js CRUD Example Tutorial For Beginners
  6.   jQuery Ajax Get JSON in Laravel Example
  7.   Table with ng-repeat using Angular Example
  8.   How to Get Current Date & Time in JavaScript
  9.   Angular 6 Routing Tutorial with Examples
  10.   Simple Laravel Form Validation Example