Implementing Routing and Navigation in Angular

Overview

• Understanding routing in Angular
• Configuring routes
• Implementing single-page applications (SPAs)
• Working with route and query parameters
• Programmatic navigation
• Introducing the Router Module
  • Directives and services for navigation
  • Steps to implement navigation
    1. Configure the route
    2. Add a router outlet
    3. Add links

Configuring Routes

• Routes determine visible components based on the URL
• Route: Mapping of a path to a component
• Example: Followers and Posts pages
  • followers page with URL /followers
  • profile page with URL /profile/:username/:userId?foo
  • Multiple parameters and query strings
• Using router module
  • import { RouterModule } from '@angular/router';
  • RouterModule.forRoot(routes) to define root/application-wide routes
  • For modular routes within child components: RouterModule.forChild(routes)
  • Route object: { path: 'path', component: Component }
• Example route definitions:
  • Home: { path: '', component: HomeComponent }
  • Followers: { path: 'followers', component: FollowersComponent }
  • Profile: { path: 'profile/:username', component: GithubProfileComponent }
  • Posts: { path: 'posts', component: PostsComponent }
  • Not Found (wildcard): { path: '**', component: NotFoundComponent }

Router Outlet

• Directive in router module to display active route component
• Placed in the template, e.g., app.component.html
  • <router-outlet></router-outlet>
• Example:

  <nav>...
    <a [routerLink]="['/followers']">Followers</a>
    <a [routerLink]="['/posts']">Posts</a>
  </nav>
  <router-outlet></router-outlet>
  

Adding Links

• Use routerLink directive instead of href for SPAs to avoid re-download and page flicker
  • Basic: <a [routerLink]="['/posts']">Posts</a>
  • Dynamic: <a [routerLink]="['/profile', username]">Profile</a>
• routerLinkActive for adding CSS class to active links
  • Example:

    <li [routerLinkActive]="'active current'">
        <a [routerLink]="['/followers']">Followers</a>
    </li>
    <li [routerLinkActive]="'active current'">
        <a [routerLink]="['/posts']">Posts</a>
    </li>
    

Working with Route Parameters

• Get parameters in a component using ActivatedRoute service
  • Inject in constructor: constructor(private route: ActivatedRoute) {}
  • Access params: this.route.paramMap.subscribe(params => {...})
  • Use params.get('paramName') to access specific parameters
  • Example:

    this.route.paramMap.subscribe(params => {
      this.userId = +params.get('id');
    });
    

• Convert string parameters to another type (e.g., number)

Summary

• Define and configure routes
• Implement router outlets for displaying active components
• Use routerLink for navigation without page reloads
• Handle route parameters effectively with ActivatedRoute
• Ensure specific routes precede wildcard routes to work correctly

Additional Notes

• Dynamic URLs with route parameters should use property binding for routerLink
• routerLinkActive used for dynamic application of CSS classes based on active route
• Error handling and routing configurations are critical for seamless user experience