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.

Location Strategies in Angular Routing

In Angular routing we have two location strategies that we can use to implement client side routing.

1. PathLocationStrategy
2. HashLocationStrategy

In this post we’ll see what is location strategy, which routing strategy to chose for your SPA and what are the differences between the HashLocationStrategy and PathLocationStrategy.

How to Create a Custom Observable in Angular

In this post we’ll see how to create a custom Observable in Angular. Observables are based on Observer design pattern in which an object, called the subject, maintains a list of observers and notifies them automatically of state changes. Some thing like this-

public interface Subject {
  public void register(Observer obj);
  public void unregister(Observer obj);

  public void notifyObservers();
}

Angular Route Resolver - Passing Data Dynamically

In the posts route parameters and Angular query parameters we have seen examples of passing data in the route and using it in the component as it is or to retrieve more data. This process happens once you have navigated to a route but you can also get data before you have navigated to a route. That is done using Angular Resolve interface that classes can implement to be a data provider. A data provider class can be used with the router to act as a resolver and it can resolve data during navigation. Using Resolve interface in Angular gives you one way to get data dynamically before navigating to a route.

Angular Resolve interface

Resolve interface has a single method resolve() that is invoked when the navigation starts. The router waits for the data to be resolved before the route is finally activated.

Angular Route - Passing Static Data

We have already seen how to pass data to a route using route parameters and using Angular query parameters. In this post we’ll see how to pass static data to an Angular route. Static data is configured at the time of defining a route using data property.

For example, here is a route definition with data property-

{path: 'wrongpath', component: PageNotFoundComponent, data :{ message:'Page not found'}},

As you can see with data property you can pass an object having key, value pairs.