Overview Of Routing And Navigation In Angular

> ng new TestApp

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';

const routes: Routes = [
    { path: 'studentDetails', component: StudentDetailsComponent },
    { path: 'studentMarks', component: StudentMarksComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

<!-- The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <a routerLink="/studentDetails">Student Details</a>
  </li>
  <li>
    <a routerLink="/studentMarks">Student Marks</a>
  </li>
</ul>
<router-outlet></router-outlet>

Open student-details.component.html and add the below contents.

<h2>Student Details</h2>
<p>This is student details page. You can fetch the details of students through services and render here in this view.</p>

Open student-marks.component.html and add the below contents.

<h2>Marks Details</h2>
<p>This is student marks details page. You can perform the fetching of student marks and render here in this view through services.</p>

Now import AppRoutingModule in AppModule.

Open app.module.ts and add the below contents.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    StudentDetailsComponent,
    StudentMarksComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run the application.

See the URL ‘localhost:4200’

Click on student Details.

See the URL ‘localhost:4200/student details’.

Click on student marks.

Url is now ‘localhost:4200/student marks.

So now we are done with the sample navigation using routing in angular.

What we have done?

• In Index.html we should have ‘<base href=”/”>’
• In app-routing module configures the routes. Each path will have a path and corresponding component.
• After defining routes pass the routes to the RouterModule.
• Export the AppRoutingModule.
• Import AppRoutingModule in appModule and include it in the imports array.
• To navigate we have links with the ‘routerLink’ directive with a path.
• Click to navigate between views.