What is Angular Router

Angular Router is a powerful navigation and routing library provided by Angular. It allows you to build single-page applications (SPAs) with multiple views and navigate between them without causing a full page reload. Angular Router enables declarative routing, lazy loading of modules, and handling of complex navigation scenarios.

Key Features of Angular Router:

1. Declarative Routing: Angular Router allows you to define the navigation paths declaratively in the application's configuration. You specify routes using RouterModule.forRoot() in the root module and RouterModule.forChild() in feature modules.

2. Nested Routes: You can nest routes within one another to create hierarchical navigation structures. This is useful for organizing and modularizing the application's views.

3. Lazy Loading: Angular Router supports lazy loading of modules, where modules are loaded asynchronously only when the user navigates to their corresponding routes. This helps in reducing the initial bundle size and improving application load time.

4. Route Parameters: You can define route parameters that allow dynamic segments in the URL. Parameters can be extracted from the URL and used to fetch data or customize the displayed content.

5. Router Guards: Router guards are used to protect routes from unauthorized access. Angular Router provides several types of guards such as CanActivate, CanActivateChild, CanDeactivate, Resolve, and CanLoad.

6. Router Events: Angular Router emits events during the navigation lifecycle, such as navigation start, navigation end, route activation, etc. These events can be subscribed to for performing actions or logging.

7. Router Outlet: The <router-outlet> directive acts as a placeholder where the router renders the component view for the matched route. It dynamically loads the component associated with the current route.

8. Router Links: Angular provides the <a> tag extensions (<a routerLink="..."> and <a [routerLink]="...">) for navigating to different routes within the application without triggering a full page reload.

Example Usage:

Here’s a basic example of configuring routes and navigating using Angular Router:

1. Configure Routes in app-routing.module.ts:

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { AboutComponent } from './about.component';

const routes: Routes = [

  { path: '', component: HomeComponent },

  { path: 'about', component: AboutComponent }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

2. Use Router Links in the template (app.component.html):

<ul>

  <li><a routerLink="">Home</a></li>

  <li><a routerLink="about">About</a></li>

</ul>

<router-outlet></router-outlet>

3. Lazy Loading Example (for feature modules):

const routes: Routes = [

  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

];

Summary:

Angular Router provides a comprehensive mechanism for managing navigation within Angular applications, supporting features like declarative routing, lazy loading, route parameters, guards, and more. It plays a crucial role in creating dynamic and responsive single-page applications by enabling seamless navigation between different views and modules.