Explain Routing in Angular?

Web Development
#1

Routing is a mechanism used by Angular Framework to manage the ‘Paths’ and ‘routes’ of our Angular applications.

Routing strategy helps in navigation between various views in our Angular application.

Angular framework comes with ‘Router’ Module which has everything we need to design, develop and implement routes and navigation links

We can handle various types of routes in angular app:

  • Routes for components
  • Getting query params from routes
  • Getting the URL segments
  • Loading child routes for a module
  • Lazy loading
  • Handling wild card routes
  • Handling default routes
  • Handling 404 route

Angular Routing Module:

We need to import modules from the package

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

We need to configure route path array in the file

const routes: Routes = [];

Then we need to define our module


@NgModule({ 

import: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
 }

We need to export the module

export class AppRoutingModule{}

Import the module in the AppModule file

Angular Parameterized Routes:

We can configure and send parameters to our routes

We need to configure the route and mention that the value is dynamic

{ path: 'product', component: ProductComponent }

Angular Child Routes:

We can configure child routes to create more meaningful URL segments

The child routes array will follow syntax and array concept as similar to defining the routes array

Syntax for defining the child routes

{ path: 'product', component: ProductComponent, children:
 [ { path: 'detail/:id', component: ProductDetailComponent } ],