Hi Friends,
In this section, we will get started with angular routing. For any single page app, routing is the key ingredient. Hence, let’s get started. Before understanding routing, let’s look at below page.
Here, everything is flushed on the same page. This looks very clumsy. It would be nice if these stuffs would have been properly separated out into individual pages. Individual pages means routing here. Therefore, movie info should remain at Movies tab and review info should be at Reviews tab. Currently, in the app.component, I am loading all info. Below is the snippet for the same.
Now, in order to split the app into multiple routes, these routes have to be configured first. Therefore, first question comes, where route can be configured? Well, the best place to configure route is app.module.ts file. Below, in the snippet, I have added a set of routes in the const variable appRoutes. Now, each route is just a JavaScript object in this array. This takes path, component. Here, it means if some route is reached, some kind of action needs to performed, which is governed by component. Here, first path is left empty, which basically indicates home page.
With the above change, we have setup routes. But this alone won’t do anything. For Angular to understand these routes, RouterModule needs to be imported. Now, we have routing functionality to our app, but still our app is not registered. That is why, our router module has special method called forRoot(), which allows us to register some routes for our main application here. Therefore, I have passed appRoutes constant to forRoot() method as an argument. And with this change, our routes are registered in this angular app on this router module, which gives us this routing functionality. This also means, now angular know our routes.
Now, we need some way to render these routes. Hence, the best place to render these in HTML itself. Below, in the markup, I have simply added. Now, this simply marks the place saying that this is the place, where view will get rendered.
Now, at this stage, when I save the app, and see the browser, it will present below homepage only.
Also, If I try movies and reviews route that will work fine like shown below.
Off-course, Our links are not working and we need to fix that but at least our routes started working. One lazy way to fix this problem by using href itself like shown below.
But, the problem with this approach is everytime when we click on any link, entire app gets reloaded and also active class doesn’t toggle. However, this toggling is a different issue. We will see this later. Now, in order to fix this kind of behavior, there is a special directive angular gives us called routerLink. Below is the finished snippet for the same.
With above change in place, at-least now page is not reloading, its navigating to routes perfectly. In the coming section, we will delve further into routing module. Till then stay tuned and Happy Coding.
Download Code:- https://github.com/rahulsahay19/Angular-Routing
Thanks,
Rahul Sahay
Happy Coding
