25
Routing with Angular 11 Router: Full-Tutorial
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).
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 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.
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>
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.
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
Now that we have got the basics of Angular routing, let's create a single application page.
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. 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,
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
We then make this
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. 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. 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!
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!
25