All About Routing in Angular
Routing in Angular is a fundamental concept that allows you to build single-page applications (SPAs) with multiple views or pages, all within a single HTML page. It enables navigation between different components or views while maintaining the application state.
Here’s a detailed overview of routing in Angular:
1. Setting Up Routes:
- RouterModule: To enable routing in your Angular application, you need to import the
RouterModule
and configure it in your main app module.
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'products', component: ProductsComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
In this example, an array of route configurations is defined. Each configuration specifies a route path and the component to display when the route is activated. You can also define redirects and a wildcard route for handling unknown paths.
2. Router Outlet:
- To render components associated with routes, you need to add a
<router-outlet></router-outlet>
element in your main app component's template. This is where the activated component will be displayed.
<router-outlet></router-outlet>
3. Navigating Between Routes:
- You can navigate to different routes using the
RouterLink
directive in your templates.
<a routerLink="/home">Home</a>
<a routerLink="/products">Products</a>
<a routerLink="/about">About</a>
- Programmatically, you can use the
Router
service for navigation in component code.
import { Router } from '@angular/router';
constructor(private router: Router) {}
navigateToProducts() {
this.router.navigate(['/products']);
}
4. Route Parameters:
- Routes can have parameters to pass data between components. You define route parameters in the route configuration.
const routes: Routes = [
{ path: 'products/:id', component: ProductDetailComponent },
];
- Access route parameters in a component using
ActivatedRoute
.
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.productId = params['id'];
});
}
5. Child Routes:
- You can create nested or child routes to organize your application’s routes hierarchically.
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: 'list', component: ProductListComponent },
{ path: 'detail/:id', component: ProductDetailComponent },
],
},
];
6. Route Guards:
- Route guards protect routes based on conditions. Angular provides several types of guards like
CanActivate
,CanDeactivate
,CanLoad
, andResolve
.
7. Lazy Loading:
- Lazy loading allows you to load parts of your application on-demand, reducing initial loading times. You configure lazy-loaded routes using the
loadChildren
property.
const routes: Routes = [
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},
];
8. Router Events:
- Angular’s
Router
emits events that you can subscribe to, allowing you to perform actions based on route changes. Common events includeNavigationStart
,NavigationEnd
, andNavigationError
.
9. Location Strategies:
- As mentioned earlier, Angular supports different location strategies, such as
PathLocationStrategy
andHashLocationStrategy
, to determine how route URLs are displayed and handled.
10. Route Configuration in HTML:
- You can also configure routes directly in HTML using the
[routerLink]
directive and therouter-outlet
element. This approach is known as "RouterLink DSL."
<a [routerLink]="['/products']">Products</a>
<router-outlet></router-outlet>
Routing in Angular is a powerful tool for building complex single-page applications with structured navigation. It allows you to create clean, maintainable, and organized code for managing different views and components within your application.