Skip to content

Routing

Expected state of the application after the end of the "Data Binding" section: [download code

Basically, routing means navigating between pages. Many websites have links that direct the user to subpages. In Angular, this can be achieved using routing. In the project we build while learning about Angular, the subpages we refer to will be in the form of components.

Angular routing allows you to build applications with multiple states and views using routes and components, and enables client-side navigation and routing between different components. The router is contained in the @angular/router package.

In order to be able to edit individual students or add new ones, it would be necessary to create separate "subpages", where it could be done using the appropriate form. To achieve this goal, we will use routing, i.e. the ability to create addresses with different views.

In Angular, it's good practice to load and configure the router in a separate top-level module that is dedicated to routing and imported by the main AppModule module.

By convention, the module class name is AppRoutingModule and must be created in the app-routing.module.ts file inside the src/app folder. Let's use the CLI to generate this module:

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

Note two additional flags commands:

  • --flat: places the file in src/app instead of in its own directory.
  • --module=app: registers the file in the AppModule import table.

The generated file, i.e. src/app/app-routing.module.ts replace with the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { StudentsComponent } from './students/students.component';

const routes: Routes = [
  { path: '', redirectTo: '/students', pathMatch: 'full' },
  { path: 'students', component: StudentsComponent }
];

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

Let's look at this code. First, AppRoutingModule importsRouterModule and Routes so that the application can have routing functions. The next import, StudentsComponent, will tell the router where it can go after the routes have been configured.

Routes tell the router which view to display when a user clicks a link or pastes a URL into the address bar.

A typical Angular route has two characteristics:

  • path: string that matches the URL in the browser's address bar.
  • component: the component that the router should create when navigating to this route.

To make the app navigate to the student list automatically, we've added a special route that redirects the "empty" url to the path / students. The property pathMatch: 'full' was used here, which must appear when redirecting routes with empty paths.

Then we see the @NgModule decorator, which initializes the router and starts listening for browser location changes. We import the RouterModule module in it, which takes theroutes configuration table, and we also export the same module so that it is available in the entire application.

Router directive added

Let's open the main AppComponent template and replace the <app-students> element with <router-outlet>:

<main class="container">
  <router-outlet></router-outlet>
</main>

The AppComponent template no longer needs <app-students>, as the application will only display StudentsComponent if the user navigates to it.

From now on, it is <router-outlet> that tells the application which views (components) are to be displayed at the given address. Router-Outlet is a directive that is available in the router library where the router inserts a component that will be matched based on the current browser URL.

An angular router provides two navigation directives:

  • routerLink - replaces the href attribute in <a> tags.
  • routerLinkActive - for marking the active link.
<a [routerLink]="'/students'">Students</a>

We will use the routerLink directive on the next occasion.