Routing with Angular 11 Router: Full-Tutorial

Introduction

This tutorial will walk you through the process of creating your Angular application using Routers. We'll learn the basics of Router outlets, navigations, routes, and paths to generate a complete Angular Single Page Application (SPA).

For you to be able to follow this tutorial along, it'll be a necessity to have basic knowledge of Angular.

Getting started with Angular router

Angular Router is a core part of Angular that aids in building a single-page application. It's located in the @angular/router package.

It has a complete routing library for constructing multiple route outlets. It also supports several features such as lazy loading and routing guards for access control et cetera.

Routes and paths

Routes are objects. At the lowest level, they comprise Angular components and paths, and sometimes redirectTo. This provides more details about a specific route plus a component to load on navigation. Paths are part URLs that are used to locate a resource.

An example of a route:

----------------------------
{ 
  path:  '',
  component:  myDashboardComponent,
},
{ 
  path:  'myPath',
  component:  MyPathComponent
}
------------------------------

You'll notice that these routes contain at least a path associated with its component.

The Angular router-outlet

Router-Outlet is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen.

It's exported by the RouterModule and added to the template as shown below:

<router-outlet></router-outlet>

Angular route guards

In our web applications, there are resources that we usually restrict their access to authenticated users only. This feature is made possible by Angular using the route guards.

Let's look at an example:

import { Injectable } from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '@app/core/services';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate
{
  constructor(private router: Router, private authService: AuthService) {  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
  {
    const user = this.authService.user;
    if (user)
    {
      // user authentication successful
      return true;
    }
    // authentication failed, redirect user to login page
    this.router.navigate(['/login']);
    return false;
  }
}

In this authentication guard script, we implemented the CanActivate while overriding the canActivate() method returning a boolean.

If it returns, and access is allowed to the component, otherwise the user is redirected to the login page.

Navigation directives

Normally, we create navigation links in HTML using the <a href='#'>link</a> tags. In an Angular application, href in the <a> tag is replaced with the routerLink as shown below:

<a routerLink="'/testLink'">my Angular Link</a> //
<a routerLinkActive="'/testLink'">my Angular Link</a> // for active links

Routing in action

Now that we have got the basics of Angular routing, let's create a single application page.

Step 1: Generate a new Angular project

In this step, let's create a simple Angular application, 'routing-example' by running the following command on the terminal:

ng new routing-example

This prompts you to answer Yes/No questions as shown below:

// while creating a new angular project, these sets of questions are displayed.
--------------------------
    ? Do you want to enforce stricter type checking and stricter bundle budgets in t
    he workspace?
      This setting helps improve maintainability and catch bugs ahead of time.
      For more information, see https://angular.io/strict No
    ? Would you like to add Angular routing? Yes
    ? Which stylesheet format would you like to use? (Use arrow keys)
    ❯ CSS 
      SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
      Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
      Less   [ http://lesscss.org                                             ] 
      Stylus [ https://stylus-lang.com  
---------------------------

Enter Yes for the Angular routing option to generate the routing module for our application.

Generate components

Since we're going to define routes using components, let's generate these components by running the following commands:

cd routing-example
ng g component my-dashboard && ng g component student

Now, let's navigate to the app.routing-module.ts and update the routes as shown below:

// app.routing-module.ts has the following contents
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: '',
    component: MyDashboardCompoent,
  },
  {
    path: 'students',
    component: studentComponent,
  },

];
@NgModule({
  imports: [
      RouterModule.forRoot(routes)
  ],

  exports: [
      RouterModule
  ],
})
export class AppRoutingModule { }

This line,import { Routes, RouterModule } from '@angular/router'; imports the Routes and RouterModule from the router package.
We then declare the routes constant of type Routes, which we imported earlier. We've defined the paths with their respective components.

In the @NgModule(), we import the RouterModule and pass it the routes we defined via the RouterModule.forRoot(routes) method.
We then make this RouterModule accessible by other modules by exporting it.

Setting up router outlet

Now that we've defined our application routes, let's now add the Router-Outlet to our main application template, app.component.html as seen below:

<h4>My First Single page application</h4>
<router-outlet></router-outlet>

Next, import the app. routing-module in the app. module.

-------------------------------------------
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentComponent } from './app.component';
import { MyDashboardComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
    MyDashboardComponent,
    StudentComponent
  ],
  imports: [
    ---------------
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You've reached this far? Congratulations, now let's serve our application:

cd routing-example
ng serve

This will start your application on port 4200 by default or the immediate port if 4200 is in use. You can now navigate to this route and test your routes.

Conclusion

In this tutorial, we've discussed the powerful Angular routing tool. We discussed how we can define routes and build a complete single-page application.
We've discussed other Angular routing concepts such as router outlets, paths, and routes. We also introduced the concept of Angular routing guards, by looking at an example of user authentication.
Happy coding!