Angular Routing Overview

Angular routing enables seamless navigation between different views or components within an Angular application, facilitating a single-page application (SPA) experience where users can navigate without page reloads.

Key Concepts

• RouterModule:
  • This module manages navigation within the application.
  • It must be imported into the application module to utilize routing features.
• Routes:
  • Routes are configuration objects mapping a URL path to a component.
  • Each route defines the path and the component displayed when that path is accessed.
• RouterOutlet:
  • A directive acting as a placeholder for the routed component.
  • Used in templates to specify where the routed component should be displayed.

Basic Setup

1. Define Routes:
   • Create a routes array that maps paths to components.
2. Configure RouterModule:
   • In the @NgModule decorator, import the RouterModule with the defined routes.
3. Use RouterOutlet:
   • In your main template (e.g., app.component.html), include the <router-outlet> directive.

<router-outlet></router-outlet>

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

Import RouterModule:

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

Navigation

To navigate between routes, you can use:

• RouterLink:
  • A directive that lets you define links to routes in your templates.
• Router Service:
  • Programmatically navigate using the Router service.

constructor(private router: Router) {}

goToAbout() {
  this.router.navigate(['/about']);
}

<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

Conclusion

Angular routing is crucial for creating dynamic SPAs. By mastering route setup, utilizing RouterOutlet, and navigating between views, you can significantly enhance user experience and application structure.