Angular Routing with Parameters and how routing works

Route path can receive data from url with the help of parameter, this is
 similar to querystring concept of traditional web development

  http://../details.aspx?pid=p001----------->details.aspx
                                                  |
                                            Request.queryString["pid"]

Paraname should be prefixed with :,route path can have any numb of paras

Parameter value can be read with in component class using "ActivatedRoute" class

Syntax:
   this._activatedroute.ParamMap.subscribe((paras)=>{
                 paras.get("paraname")
                                                  });



How Angular Routing Works

angular router performs the following 7 steps

Step1: Parse the URL
Angular Router takes the browser URL and parses it as a URL tree. To parse the URL, the angular framework uses the following conventions:

Slashes (/): slashes divides URL segments
Parentheses (): Parentheses specify secondary routes
Colon (:): A colon specifies a named router outlet.
Semicolon (;): A semicolon specifies a matrix parameter
Question Mark (?): A question mark separates the query string parameters.
Hashtag (#): The hashtag specifies the fragment
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’}.
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 route’s 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. That’s 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.
ou 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.