Angular 4 routing tutorial for beginners

ng new routing

Here my project name is "routing". after successfully create this app we are going to create some components.

Create Components in angular CLI

I am going to create some components home, employees and pageNotFound. To Create new components use this Command line.

ng generate component home

or

ng g c home

Step 1:

 Set "<basehref="/">" in index.php

 <base href="/">

Step 2:

Best Practice for Routes Creates a new separate module by CLI command.

ng generate module app-routing --flat --module=app

The created file looks like this.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

Import the RouteModule into the src/app/app-routing.module.ts page. 

import { RouterModule ,Routes } from '@angular/router';

'@angular/router'  is a route Package. Now define our routes to define our route creating a const "appRoutes", we know Route is an array and here Four Array object.

const appRoutes:Routes= [
 {path: 'home',component:HomeComponent},
 {path: 'employees',component:EmployeesComponent},
 {path: '' ,redirectTo:'/home',pathMatch:'fill'},
 {path: '**',component:PageNotFoundComponent}
];

Now let's understand the purpose of each of this object. First When the user calls the path something like "http://localhost:4200/home" so this path in the URL match with the first line of Routes.

{path: 'home',component:HomeComponent},

So, in this case, we want to display "HomeComponent" to view.

The fourth Route is special route when the user request for unlisted routes in this above routes "PageNotFoundComponent" component will call.

Next thing to do that let's angular know that where routes are defined. So make a forRoot method for imports. 

 imports: [
    BrowserModule,
     RouterModule.forRoot(appRoutes)
  ],

Step 3: 

Specify where you want the route component view template to be displayed using the <router-outlet> directive. Edit app.component.html 

<h1>{{title}}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>

Now test your application manually in the browser.

Ok Great, now Test for employees and see what happens.