Posted inTechnology / AngularJS

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




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





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

app.component.html



 

aboutus.component.html



About Us - Simple Angular 6 Routing

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.

contactus.component.html



products - Simple Angular 6 Routing

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.

products.component.html



Pakainfo - Simple Angular 6 Routing

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.

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




 
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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype