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

In this article, 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.