Angular 4 Tutorial - Creating a Routing Project

Routing allows users to navigate from one view to other. Routing in angular has many features including security.

Angular 4 Tutorial - Table Of Contents
Angular 4 Hello World Program
Angular 4 Tutorial - Creating a Components Project
Angular 4 Tutorial - Routing Project

Previously we had created a Hello World App and created components for it. We will now add routing for these components
angular Router is not part of angular core. To use routing we have to make use of external RouterModule. So we will have to import the RouterModule in the app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';


import { AppComponent } from './app.component';
import { EmployeeListComponent } from './components/employee-list/employee-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
	RouterModule.forRoot([
	{
		path: 'employees',
		component: EmployeeListComponent
	}	
	])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next go to app.component.html file and using the router link directive add the links to the components.

<h1>
  {{title}}
</h1>
<div>
<a routerLink="/employees">Employees</a>
</div>

Start the application.

npm start

Now go to localhost:4200-

 
See Also
Removing the # from the AngularJS URL
Use Google reCaptcha with AngularJS
Use AngularJS NgCloak directives Example
PrimeNG-UI Components for AngularJS 2 Basic Example