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
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