Suggested Videos
Part 15 - Angular tslint rules | Text | Slides
Part 16 - TSLint in Visual Studio Code | Text | Slides
Part 17 - Angular Routing | Text | Slides
In this video we will discuss, How routing works in an angular application. This is continuation to Part 17. Please watch Part 17 from Angular CLI tutorial before proceeding.
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
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.
Part 15 - Angular tslint rules | Text | Slides
Part 16 - TSLint in Visual Studio Code | Text | Slides
Part 17 - Angular Routing | Text | Slides
In this video we will discuss, How routing works in an angular application. This is continuation to Part 17. Please watch Part 17 from Angular CLI tutorial before proceeding.
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.
nice explination sir
ReplyDelete