Routing and Navigation – Angular

What You’ll Learn 📚

• Core concepts of routing and navigation in Angular
• How to set up and configure routes
• Using router links to navigate
• Handling route parameters and guards
• Troubleshooting common issues

Introduction to Routing in Angular

Routing in Angular is like setting up a GPS for your application. It allows you to define paths and navigate between different views or components. Imagine your app as a city, and each component is a different location you can visit. Routing helps you move from one place to another seamlessly.

Key Terminology

• Route: A path to a specific component or view in your application.
• Router: The service that manages navigation between routes.
• RouterLink: A directive to link to a route.
• Route Parameters: Variables passed in the URL to provide additional information to a route.

Getting Started: The Simplest Example

ng new angular-routing-tutorial --routing

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

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

ng generate component home

Progressively Complex Examples

Example 1: Adding Multiple Routes

// src/app/app-routing.module.ts
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Example 2: Navigating with RouterLink

Go to About

Example 3: Route Parameters

// src/app/app-routing.module.ts
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

// src/app/user/user.component.ts
import { ActivatedRoute } from '@angular/router';

export class UserComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => console.log(params['id']));
  }
}

Example 4: Route Guards

// src/app/auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // Implement your authentication logic here
    return true; // Allow access
  }
}

// src/app/app-routing.module.ts
const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];

Common Questions and Answers

1. What is the purpose of routing in Angular?

   Routing allows you to navigate between different views or components in your application, making it dynamic and interactive.

2. How do I pass data between routes?

   You can use route parameters or query parameters to pass data between routes.

3. What is a router outlet?

   A router outlet is a placeholder in your template where routed components are displayed.

4. How can I protect a route?

   You can use route guards to control access to certain routes based on conditions like authentication.

5. Why is my route not working?

   Check if the path is correctly defined in your routing module and ensure the component is declared in your module.

Troubleshooting Common Issues

Issue: Route not found or 404 error.

Solution: Ensure the route is correctly defined in the app-routing.module.ts and the component is properly imported and declared.

Issue: RouterLink not navigating.

Solution: Check if the routerLink is correctly spelled and matches the route path. Also, ensure the RouterModule is imported in your module.

Practice Exercises

• Create a new component and add a route for it.
• Set up a route with parameters and log the parameter value in the component.
• Implement a simple route guard that allows access based on a condition.

Remember, practice makes perfect! Keep experimenting and exploring Angular’s routing capabilities. You’ve got this! 💪

For more detailed information, check out the official Angular documentation.