Implementing routing in an Angular application involves many small steps. Angular CLI does a pretty good job in having some of these routing steps implemented out of the box by just using –routing option.
Before we discuss, how we can use Angular CLI to implement routing let’s setup routing manually so we understand all the moving parts as far as implementing routing is concerned.
Using the following command, first create a brand new Angular project using the Angular CLI.
ng new employeeManagement
We named it employeeManagement. Let’s assume we are using this application to manage employees. Out of the box, Angular CLI has created the root component – AppComponent. In addition let’s create the following 3 components
home : ng g c home
employees : ng g c employees
pageNotFound : ng g c pageNotFound
Steps to implement routing in Angular
Step 1 : Set base href in the application host page – index.html
Step 2 : Import the RouterModule into the application root module AppModule. The Router Module contains the Router service and Router directives such as (RouterLink, RouterLinkActive, RouterOutlet etc). So for us to be able to implement routing, we first need to import the Router Module in our AppModule.
Step 3 : Configure the application routes.
import { RouterModule, Routes } from ‘@angular/router’;
// Each route maps a URL path to a component
// The 3rd route specifies the route to redirect to if the path
// is empty. In our case we are redirecting to /home
// The 4th route (**) is the wildcard route. This route is used
// if the requested URL doesn’t match any other routes already defined
const appRoutes: Routes = [
{ path: ‘home’, component: HomeComponent },
{ path: ’employees’, component: EmployeesComponent },
{ path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ },
{ path: ‘**’, component: PageNotFoundComponent }
];
// To let the router know about the routes configured above,
// pass “appRoutes” constant to forRoot(appRoutes) method
// We also have forChild() method. We will discuss the difference
// and when to use one over the other in our upcoming videos
@NgModule({
declarations: […
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 : Specify where you want the routed component view template to be displayed using the router-outlet directive
Step 5 : Tie the routes to application menu.
To install bootstrap execute the following npm command
npm install bootstrap@3 –save
Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below.
“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”]
At this point Routing should be working as expected.
The following are the directives provided by the RouterModule
routerLink
Tells the router where to navigate when the user clicks the navigation link
routerLinkActive
When a route is active the routerLinkActive directive adds the active CSS class. When a route becomes inactive, the routerLinkActive directive removes the active CSS class.
The routerLinkActive directive can be applied on the link element itself or it’s parent. In this example, for the active route styling to work correctly, routerLinkActive directive must be applied on the list item element and not the anchor element.
router-outlet
Specifies the location at which the routed component view template should be displayed
At the moment routing is implemented in the root module – AppModule. However, for separation of concerns and maintainability, it is better to implement routing in a separate Routing module and then import that routing module in the AppModule. In a later video, we will discuss how to move routing into it’s own routing module.
As we have seen throughout this video, there are many moving parts that we have to remember, to implement routing correctly in an angular application. In our next video, we will discuss, the routing workflow and how routing actually works in Angular, by connecting all these little moving parts.
Text version of the video
Slides
Angular CLI Tutorial
Angular CLI Text articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
