Design Routes in Angular | Generated by AI

Home 2025.04

Okay, let’s break down how to design routes in Angular for easy refreshing, sub-routes, and handling query parameters.

1. Easy Refresh and Staying on the Same Page

Angular’s default routing mechanism is designed to handle this seamlessly. When you navigate to a specific route in your Angular application, the browser’s URL changes. This URL represents the current state of your application. When you refresh the page, the browser makes a request to the server for the resource associated with that URL. Angular’s routing module then takes over and renders the component associated with that route.

Key points:

Example AppRoutingModule:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }, // Route with a parameter
  { path: '**', redirectTo: '' } // Wildcard route for unknown paths
];

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

In this example:

2. Designing Sub-routes (Child Routes)

Sub-routes, or child routes, allow you to create nested layouts within your application. This is useful for sections where you have a parent component that acts as a container for other related components.

Example: Let’s say you have an “Admin” section with “Users” and “Settings” sub-sections.

Steps:

  1. Create Parent and Child Components:

     ng generate component admin
 ng generate component users
 ng generate component settings

  2. Configure Child Routes in the Parent’s Routing Module (or the main AppRoutingModule):

     import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AdminComponent } from './admin/admin.component';
 import { UsersComponent } from './users/users.component';
 import { SettingsComponent } from './settings/settings.component';

 const adminRoutes: Routes = [
   {
     path: 'admin',
     component: AdminComponent,
     children: [
       { path: 'users', component: UsersComponent },
       { path: 'settings', component: SettingsComponent },
       { path: '', redirectTo: 'users', pathMatch: 'full' } // Default child route
     ]
   }
 ];

 @NgModule({
   imports: [RouterModule.forChild(adminRoutes)], // Use forChild for feature modules
   exports: [RouterModule]
 })
 export class AdminRoutingModule { }

    Alternatively, you can define them in your AppRoutingModule:

     // In AppRoutingModule
 const routes: Routes = [
   { path: '', component: HomeComponent },
   {
     path: 'admin',
     component: AdminComponent,
     children: [
       { path: 'users', component: UsersComponent },
       { path: 'settings', component: SettingsComponent },
       { path: '', redirectTo: 'users', pathMatch: 'full' }
     ]
   },
   { path: 'products', component: ProductListComponent },
   { path: 'products/:id', component: ProductDetailComponent },
   { path: '**', redirectTo: '' }
 ];

  3. Add <router-outlet> in the Parent Component’s Template (admin.component.html):

    ```html

    Admin Dashboard

    ```

Explanation:

3. Designing Routes with Query Parameters

Query parameters are used to pass optional information to a route. They appear in the URL after a question mark (?) and are key-value pairs separated by ampersands (&).

Example: A product list page where you can filter by category.

Steps:

  1. Configure the Route (No special configuration needed for query parameters):

     // In AppRoutingModule
 const routes: Routes = [
   { path: 'products', component: ProductListComponent },
   // ... other routes
 ];

  2. Navigate with Query Parameters: You can navigate to the route with query parameters using the Router service:

     import { Router } from '@angular/router';
 import { Component } from '@angular/core';

 @Component({
   selector: 'app-filter',
   template: `
     <button (click)="filterProducts('electronics')">Electronics</button>
     <button (click)="filterProducts('clothing')">Clothing</button>
   `
 })
 export class FilterComponent {
   constructor(private router: Router) {}

   filterProducts(category: string) {
     this.router.navigate(['/products'], { queryParams: { category: category } });
   }
 }

  3. Access Query Parameters in the Component: Use the ActivatedRoute service to access the query parameters:

     import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

 @Component({
   selector: 'app-product-list',
   template: `
     <h2>Product List</h2>
     <p>Filtering by category: </p>
     <ul>
       <li *ngFor="let product of products">
            
       </li>
     </ul>
   `
 })
 export class ProductListComponent implements OnInit {
   products: any[] = [
     { id: 1, name: 'Laptop', category: 'electronics' },
     { id: 2, name: 'T-Shirt', category: 'clothing' },
     { id: 3, name: 'Headphones', category: 'electronics' },
     { id: 4, name: 'Jeans', category: 'clothing' }
   ];
   categoryFilter: string | null = null;
   filteredProducts: any[] = [];

   constructor(private route: ActivatedRoute) {}

   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       this.categoryFilter = params['category'];
       this.filterProductsByCategory();
     });
   }

   filterProductsByCategory() {
     if (this.categoryFilter) {
       this.filteredProducts = this.products.filter(
         product => product.category.toLowerCase() === this.categoryFilter?.toLowerCase()
       );
     } else {
       this.filteredProducts = this.products;
     }
   }
 }

Explanation:

In summary:

Back Donate