What is Router Service?

The Router service is a powerful feature that enables navigation and routing between different components and views in a single-page-application (SPA). It allows us to handle and define navigation paths, and handle route parameters.

The Router service provides a comprehensive API for:

• Routes: Routes are mappings between URL paths and component classes. They define how the application’s UI should change in response to a URL change.
• Router Outlet: <router-outlet> is a directive used in Angular templates to render the component associated with the current route. It acts as a placeholder that Angular dynamically fills with the appropriate component.
• Route Parameters: Route parameters allow you to pass data to a route through the URL. For example, a route /users/:id can match /users/1, /users/2, etc., and the id parameter can be accessed in the component.
• Query Parameters: Query parameters are additional parameters added to a URL after a question mark (?). They are used to pass optional data to a route. For example, /products?category=1 might be used to filter products by category.
• Route Configuration: We can define routes using the RouterModule and Routes array in our app.module.ts file. Each route maps a URL path to a component or view function. Routes in an Angular application are configured using the RouterModule.forRoot() method in the root AppModule.
• Navigation: The Router service provides methods for navigating between routes programmatically. The navigate(), navigateByUrl(), and navigateByCommands() methods can be used to navigate to a specific route.
• URL Management: The Router interacts with the browser’s URL to reflect the current view. It also handles URL parsing, query parameters, and fragment identifiers.
• Route guards : These are used to protect routes and control access based on certain conditions. Angular provides several types of guards, including CanActivate, CanActivateChild, CanDeactivate, Resolve, and CanLoad.
• Router events : They provide information about the navigation lifecycle. Events like NavigationStart, NavigationEnd, NavigationCancel, and NavigationError can be subscribed to in order to perform actions based on the current navigation state.

Syntax:

Routes definition

import { Routes } from '@angular/router';
const routes: Routes = [
  { path: 'about', component: AboutComponent },  // Simple route
  { path: 'products/:id', component: ProductDetailComponent }, // Dynamic route with params
  { path: '**', component: NotFoundComponent }  // Default route for unmatched paths
];

Router Configuration:

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

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes) // Application-wide routing configuration
    ],
    // ...
})
export class AppModule { }

In this way we can define and configure routes, and now we can directly use routerLink to navigate between components.

The Router service in Angular is an important component that enables navigation within our single-page application (SPA). It involves mapping URLs to different components or views within the application and rendering the appropriate content based on the requested URL. When a user interacts with navigation links or changes the URL in the browser address bar, the Router intercepts these actions and dynamically updates the view displayed in the browser.