Angular Routing

Imagine we are navigating from one page to another page (One view to another view). Where in both the pages header, footer, and template remains same. To display a new view, an application need to send a new URL to the server and downloaded the entire page. To overcome this we can use AJAX and XMLHttpRequests and we can achieve Single Page Applications (SPAs).

Single Page Applications is an application which has only one page (for example only one html file) for entire application. All other view and different screens of the applications are obtained just by adding/updating/deleting the components from same page. Today, single-page applications (SPAs) have taken center stage. The browser communicates asynchronously with the server, so it can send and receive data without having to process HTTP requests and responses. This saves time and provides the user with a fluid, dynamic experience.

When we use AJAX to achieve SPA, for all the screens we need to have same URL. When I click on a button with AJAX request, it will update the DOM but URL will remain same. Only some part of the screen will get update. Now if we want different URL for different view with SPA, AJAX cannot be used. There are advantages to having multiple URLs. Users can visit specific parts of a page and they can move between these parts using the browser's Back/Forward buttons.

The goal of Angular routing is to enable SPAs to associate different URLs with different components and states. Another major advantage of Angular routing is that it enables lazy loading of application code. This means that the client will only download the code it needs instead of having to download all of the code at once.

The Router is a separate module in Angular. It is in its own library package, @angular/router. The Router Module provides the necessary service providers and directives for navigating through application views. When coding applications with routing, there are many new data structures and methods to be aware of. Before we discuss them in detail, I'd like to present a simple application that demonstrates how everything works together.

Router

Based on specified configurations the angular will display components as users perform application tasks like clicking on menus links, buttons or clicking on back/forward button on the browser. This mechanism which enables navigation from one component to the next component as users perform application tasks is called router.

We can also access the router object and use its methods like navigate() or navigateByUrl(), to navigate to a route. We can enable the navigation by using Router parameter in constructor, where constructor receives this Router object through dependency injection.

Routing:

The configurations we done to navigate from one component to other/ from one screen to other are called routing.

Route

Route tells the Angular Router which view to display when a user clicks a link or pastes a URL into the browser address bar. Every route consists of a path and a component it is mapped to. The Router object parses and builds the final URL using the Route.

Routes

Routes is an array of Route objects our application supports.