All you need to know about routing in AngularJS Development!

front end developers

AngularJS, a hugely popular framework having a variety of websites built with it, including Gmail, Youtube, Upwork & a pool of Google sites. Let us know more about the routing in angularjs, how to set up the routes and more, as front-end developers are hardly working on it to make the application more effective & result-driven.

Routing is all about changing the state of your application, loading different components depending on the URL that the user entered. Let’s see how routing can be implemented in Angular 2.

In order to use routing, we, of course, need to set it up.

Setting up the Routes:

In-app folder, I will create a new file named as ‘app.routing.ts’. In this routing file, I will configure my routes and export them in the form of a module which I can use in my app module. I have created a constant APP_ROUTES of type Routes.

When I create my APP_ROUTES constant, I will then export it to be called by app component. So, I will add

Now, I will import this routing constant in app.module.ts as follows:

With this, we have added Router module with our own routes.

Now, to render the component of that URL, <router-outlet></router-outlet> should be added.

<router-outlet> tells that here is the place where you should render the component you navigated to.

So basically, <router-outlet> sets the purpose of displaying the content of the component that you navigate to.

Adding router links:

Moving towards adding navigation links, it is very simple. It takes just a second to add a [routerLink] directive in an anchor tag. [routeLink] basically allows us to pass a link to or specify a path of the configured routes in app.routing.ts.

We have UserComponent and UserDetailComponent configured in the routes. So this is how we can use the routes to add a navigation link,

This will give the link as localhost:4200/user

In case you want to add a link like a localhost:4200/user/10, then just add the segments in the routerLink

There is also an alternate way to trigger navigation using code.


Sometimes, it might be a case where you want to pass some data to your routes, for example when accessing a user.

You can just pass another segment for id in the routerLink directive.

Accessing route parameters:

When it comes to accessing the parameter that you have passed to the route, you need to use the ActivatedRoute object.

What happens here is, I am subscribing to any changes that occur in the id parameter. Whenever the id parameter in the URL changes, this function in the constructor gets called automatically.

There is one important thing to keep in mind, we are subscribing to the parameter but whenever the component gets destroyed, the subscription would kind of live on and therefore will create a memory leak. A memory leak occurs when you allocate memory and forget to free it. To prevent this, a new property of subscription is created.

You just need to assign the subscribe() to the subscription object that we created. ngOnDestroy function to unsubscribe the subscription to just prevent any memory leaks.

Take a note that rxjs/Rx is a third party package responsible for the Observable.

So, you can access the query parameter in your template using the string interpolation like {{param}}.

This was about setting up the routes, routing parameters. I hope it would help all front-end developers. If you have any queries, you can post it in the comment section, I will be happy to answer them.

Happy Coding!

Share this: