What is Client Side Routing in Angular

While working with any modern JS frameworks like Angular, React, Vue you would have definitely come across two terms Single Page Application (SPA) and client side routing. In this post we’ll see what is client side routing using Angular as example framework.

Client side routing

In a traditional web application every request for displaying a page goes to the server and results in a full page load. Whereas in a Single page application each request doesn’t go to the server. Web server gives a single page, any further rendering is done locally by the Java script. So, in a SPA you will get a single page and part of the page is updated dynamically for further requests.

That is done by using selector like <app-root></app-root> and <router-outlet></router-outlet>. Your components will be dynamically loaded with in the selector without causing a full page load.

But this single page application behavior, where we don’t need to change the URL, raises some questions-

1. How can you change the URL without causing a page reload.
2. How can we preserve the forward/back button behavior of the browser, since there is no URL change so no states.
3. How to refresh a page.
4. Also from routing perspective how to map URLs to handling components.

That’s where client side routing is used to maintain and preserve states. Client side routing changes the URL and also saves the state without making a server request.

Client side routing strategy

Client side routing gives your application ability to-

1. Change the URL in browser.
2. Push the state in history so that you can move back or forward

In Angular there is a routing module that provides this functionality out of the box. Angular gives two options for handling client side routing.

1. Hash based routing
2. HTML5 routing

These two options are defined by the location strategy used by Angular, for Hash based routing the corresponding location strategy is HashLocationStrategy whereas for HTML5 routing it is PathLocationStrategy.

You can read more about Location Strategies in this post- Location Strategies in Angular Routing

Since HTML5 is supported by all modern browsers so mostly you'll be using PathLocationStrategy and it is also the default location strategy in Angular.

The history.pushState method which is part of HTML5 allows you to push an entry to the browser’s history object. The history.pushState method takes three parameters-

• State object- For passing state data to the new history entry
• Title- a title for the state
• URL- A URL for the history entry.

Using history.pushState method you achieve the desirable features of client side routing-

1. Since new history entries are created so the URL also changes in the browser to reflect new state.
2. Since history entries are there so you can also use back and forward buttons in browser to move back and forth.

That's all for this topic What is Client Side Routing in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Angular Routing Concepts With Example
2. Path Redirection in Angular Routing
3. Using RouterLinkActiveOptions to Fix Link Highlighted Problem
4. Nested Route (Child Route) in Angular
5. Setting Wild Card Route in Angular

You may also like-

1. Angular Custom Event Binding Using @Output Decorator
2. Angular Project Structure With File Description
3. Angular ngSwitch Directive With Examples
4. Angular - Call One Service From Another
5. Var type in Java - Local Variable Type Inference
6. try-catch Block in Java Exception Handling
7. Python Program to Display Prime Numbers
8. Spring MVC Generate Response as JSON Example