How Routing handles in Angular

Angular has a sophisticated and flexible routing module called @angular/router that helps you handle navigation in single-page applications (SPAs).

 

Key Components of Angular Routing:

Routes (Route Configuration):

• This is an array of JavaScript objects that define the mapping between URL paths and the components that should be displayed.
• Each route object typically has:
  • path: The URL segment. This can be static (e.g., 'home'), dynamic with parameters (e.g., 'products/:id'), or a wildcard ('**') for a 404 page.
  • component: The Angular component to render when the path matches.
  • redirectTo: Used to redirect from one path to another.
  • children: For defining nested (child) routes.
  • loadChildren: For lazy loading modules.

 

Single-Page Application (SPA) Concept:

• Initial Load: When an Angular application loads, the browser only requests the index.html file from the server.
• Client-Side Routing: After the initial load, the Angular Router takes over. It intercepts URL changes (e.g., from clicking links, typing in the address bar, or using browser back/forward buttons) and dynamically updates the displayed components without a full page refresh.

 

 

 

Routes

 

 

 

Why Instead of Anchor, RoutLink?

In normal anchor, selecting any tab reloads the complete application (refresh browser), not just content and url. On the otherhaned RouteLink tells Angular to treat the element as a click rather than a link.

 

 

What happens if we define routes without leading /

It works with links without leading / in app.component. Adding links to inner pages like servers.component.html results in an error notice.

• The reason is that without /, it creates a relative page to the servers working directory. The relative path always adds routeLink to the end of your current path./ creates absolute path from root directory, always appended to root domain.

 

 

 

RouterModule:

• This Angular module provides the necessary directives and services for routing.
• You typically use RouterModule.forRoot(routes) in your root AppModule to configure the main application routes. For feature modules, you use RouterModule.forChild(routes) to define their specific routes.

 

 

<router-outlet>:

• This is a directive used in your template (usually app.component.html) that acts as a placeholder.
• The Angular Router dynamically renders the component associated with the active route inside this <router-outlet>. You can have multiple named router outlets for auxiliary routes.

SPAs refresh the content of the page based on the URL, so users don't have to wait for the whole page to reload every time they navigate.

 

Static Router Navigation - routerLink Directive:

• This directive is used on HTML elements (typically <a> tags) to create navigation links.
• Instead of a standard href, you bind routerLink to a "link parameters array" which specifies the route path and any optional parameters.

You can hardcode a string into the template, like for server or home routes. We can also pass an expression. As in the /users path above, we must provide it an array of URL route segments to visit. 

 

 

 

Dynamic Router Navigation 

Other router navigation methods include using the router programmatic API. We just need to inject the router into our component and utilise navigate or navigateByUrl.

 

 

Using these characteristics, Angular's routing system lets developers make complicated and dynamic single-page apps that load content quickly and let users move around easily.