How Angular Routing Works?. The Complete Angular Developer Course 2022 [Videos].

In this Video, I am going to discuss How Angular Routing Works. When a user navigates to a page from another page i.e. every time a link is clicked or the browser URL changes, Angular router makes sure your application reacts accordingly. To accomplish that, the angular router performs the following 7 steps in order.

Step1: Parse the URL

In this step, Angular Router takes the browser URL and parses it as a URL tree. A URL tree is a data structure that will later help angular router identify the router state tree in step3. To parse the URL, the angular framework uses the following conventions:

  1. Slashes (/): slashes divides URL segments
  2. Parentheses (): Parentheses specify secondary routes
  3. Colon (:): A colon specifies a named router outlet.
  4. Semicolon (;): A semicolon specifies a matrix parameter
  5. Question Mark (?): A question mark separates the query string parameters.
  6. Hashtag (#): The hashtag specifies the fragment
  7. Double Slash (//): A double slash separates multiple secondary routes.
Step2: Redirect

Before Angular Router uses the URL tree to create a router state, it checks to see if any redirects should be applied. There are two kinds of redirect.

Local Redirect: When redirectTo does not start with a slash. Replaces a single URL segment. For example, {path:"one", redirectTo:"two"}.

Absolute Redirect: When redirectTo starts with a slash, replaces the entire URL. For example, {path:"one", redirectTo:"/two"}.

Note: Only one redirect is applied

Step3: Identify the Router State

In this step, the Angular Router traverse the URL tree and matches the URL segments against the path configured in the Router Configuration. If a URL Segment matches the path of a route, the routes child routes are matched against the remaining URL segments until all URL segments are matched. If no complete match is found, the router backtracks to find a match in the next sibling route.

Step4: Guard – run guards

At the moment, any user can navigate anywhere in the application. Thats not always the right thing to do. Perhaps the user is not authorized to navigate to the target component. May be the user must be login (authenticate) first. May be you should fetch some data before you display the target component.

You might want to save pending changes before leaving a component. You might ask the user if its OK to discard pending changes rather than save them.

You can add guards to the route configuration to handle these scenarios.

Step5: Resolve

It resolves the required data for the router state.

Step6: Activate

It activates the Angular Components to display the page

Step7: Manage

Finally when the new router state has been displayed to the screen, Angular Router listens for URL changes and state changes. It manages navigation and repeats the process when a new URL is requested.In the next Video, I am going to discuss Angular Services with Examples. Here, in this Video, I try to explain the 7 steps to understand How Angular Routing Works and I hope you enjoy this Video.

See All

Comments (571 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /571

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /571

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /571