Angular 4 Routing
If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
Example:
Navigate to “red.htm”, “green.htm”, and “blue.htm”:
<body ng-app=”myApp”>
<p><a href=”#/!”>Main</a></p>
<a href=”#!red”>Red</a>
<a href=”#!green”>Green</a>
<a href=”#!blue”>Blue</a>
<div ng-view></div>
<script>
var app = angular.module(“myApp”, [“ngRoute”]);
app.config(function($routeProvider) {
$routeProvider
.when(“/”, {
templateUrl : “main.htm”
})
.when(“/red”, {
templateUrl : “red.htm”
})
.when(“/green”, {
templateUrl : “green.htm”
})
.when(“/blue”, {
templateUrl : “blue.htm”
});
});
</script>
</body>
The ngRoute module helps your application to become a Single Page Application.
When a user enters a web application or website, routing is their means of navigating throughout the application. To change from one view to another, the user clicks on the available links on a page.
Angular provides a Router to make it easier to define routes for the web applications and to navigate from one view to another view in the application.
Creating Your First Route
To implement routing in the web application, you’ll be making use of the Angular Routing module. Create a file called app.routing.ts inside the src/app folder.
To get started with implementing routing, you need to import the RouterModule and Routes from @angular/router.
import { RouterModule, Routes } from ‘@angular/router’;
You’ll also need the ModuleWithProviders module for implementing routing.
import { ModuleWithProviders } from ‘@angular/core/src/metadata/ng_module’;
Create and export a variable called AppRoutes in the app.routing.ts, which would be a collection of all routes inside the Angular application.
export const AppRoutes: Routes = [];
There are two ways to create the routing module: RouterModule.forRoot and RouterModule.forChild.
RouterModule.forRoot is for creating routes for the entire application, and RouterModule.forChild is for creating routes for lazy loaded modules.
In this tutorial, you’ll be using RouterModule.forRoot to create routes for the root application.
Create the routing module using RouterModule.forRoot inside the app.routing.ts file.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
Add a route inside the AppRoutes list to show our CalcComponent.
{ path: ‘calc’, component: CalcComponent }
Here is how the app.routing.ts file looks:
import { RouterModule, Routes } from ‘@angular/router’;
import { ModuleWithProviders } from ‘@angular/core/src/metadata/ng_module’;
import { CalcComponent } from ‘./calc/calc.component’
export const AppRoutes: Routes = [
{ path: ‘calc’, component: CalcComponent }
];
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
As seen in the code, the route which has been added is /calc, which would render the CalcComponent.
Import the ROUTING constant inside the app.module.ts file.
import { ROUTING } from ‘./app.routing’
Add the ROUTING to the imports section.
imports: [
BrowserModule,
FormsModule,
ROUTING
],
Here is how the app.module.ts file looks:
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { ROUTING } from ‘./app.routing’
import { AppComponent } from ‘./app.component’;
import { CalcComponent } from ‘./calc/calc.component’
import { FormsModule } from ‘@angular/forms’;
import { RouterModule } from ‘@angular/router’;
@NgModule({
declarations: [
AppComponent,
CalcComponent
],
imports: [
BrowserModule,
FormsModule,
ROUTING
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Save the above changes and restart the Angular application using ng serve.
IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4
Back to Angular 4 Tutorial Main Page 
