Routerlink
- If you use normal links with
href attribute, entire page is downloaded and angular application is re-initialized
- As the application grows the cost of startup is going to be higher
- When you click on the link all the resources in the application are redownloaded. eg javascript bundles
- We want only the content of the new page need to be downloaded not the entire application.
- For this we use
routerLink directive
Single Page Applicatons (SPAs)
- A single page is downloaded from the server, when the user navigates from one page to another, only the content of target page is downloaded
- In angular application we dont use href attribute of anchor tag
- In navbar.component.html
<a routerLink="followers">Followers</a> //use attribute for setting string
- In followers.component.html
- When dealing with router parameters, parameter should be rendered dynamically. Use property binding syntax and bind it to an expression
<a [routerLink]="['followers', follower.id]"></a> //use property binding for dynamic values
- First element - path
- Subsequent elements - route parameters
- For simple routes use
routerLink directive as an attribute and set it to a string value
- When dealing route parameters use property binding syntax and set the value of the property to array