In this video we will discuss, How routing works in an angular application.
As you have seen in our previous video, there are many small steps that you have to remember, to implement routing correctly in an angular application. Let’s quickly recap those steps.
Step 1 : Set base href in index.html.
Step 2 : Import the RouterModule into the application root module AppModule.
Step 3 : Configure the application routes.
Step 4 : Specify where you want the routed component view template to be displayed using the router-outlet directive
Step 5 : Create a navigation menu and tie the configured routes with the menu using the routerLink directive. Optionally, use the routerLinkActive directive to style the current route that is active, so the user knows the page that he is on, in the application.
Now, let’s connect all these small steps and see how routing actually works.
1. We have built the “Home” and “Employees” links using the RouterLink directive. The RouterLink directive tells the angular router where to navigate when the respective links are clicked. So for example, when we click on the “Home” link, the angular Router includes ‘/home’ in the URL.
2. When the URL changes the angular router looks for the corresponding route in the route configuration. In this case the URL changed to /home, so the router looks for the home route. We have the ‘home’ route already configured. In the route configuration, we have specified to use the HomeComponent.
3. So the angular router knows to display the HomeComponent view template, but the question is where should the HomeComponent view template be displayed.
4. At this point, the Angular router looks for the router-outlet directive. The home component view template is then displayed at the location where we have the router-outlet directive. In our case, we placed the router-outlet directive in the root component (AppComponent) because that is the top level component where we want our routed component templates to be displayed.
5. We specified ‘app-root’ as the selector for the root component (AppComponent). This selector (app-root) is used as a directive in the application host page i.e index.html. So along with the navigation menu HTML that we already have in the root component, the HomeComponent view template is also display in index.html page.
6 . Now when we click on the “Employees” link, Steps 1 to 5 happen in the order specified and the HomeComponent view template is replaced with the EmployeesComponent view template.
Hope you are now able to connect all the dots and have a good understanding of all the small steps of implementing routing in an angular application.
Please note : When configuring routes in our previous video, we imported Routes type from ‘@angular/router’. If you look at the definition of Routes type, it is actually an array of Route objects. This Routes type is not required for the application to work. Even if we remove the Routes type declaration from appRoutes as shown below, the application routing works exactly the same way as before. However, using it provides us compile time checking if we mis-spell the properties of the Route object.
Notice the type declaration : Routes is removed from appRoutes constant
const appRoutes = [
{ path: ‘home’, component: HomeComponent },
{ path: ’employees’, component: EmployeesComponent },
{ path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ },
{ path: ‘**’, component: PageNotFoundComponent }
];
At the moment routing is implemented in the root 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 our next video, we will discuss how to move routing into a separate routing module.
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
