Search Tutorials


Angular 4 Tutorial - Creating a Routing Project | JavaInUse

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

angular4-1_3
Now go to localhost:4200-

angular4-3_1

 

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