Angular Routing Explained: How to Connect Components

If this helped you understand Angular routing in a fun way, feel free to like or share—it really means a lot! Okay, here’s the story:

---

I’m planning a road trip with my friends. We have a big map of places we want to visit: the mountains, a cozy café in the city, and a scenic beach. Each location is a “destination” on our map, and I need to decide which roads lead where.

In Angular, routes are like my map. Each stop on my road trip is like a “component” in my app, and the routes are the paths that connect those components. Just like I write down instructions for driving—”Take the highway to the mountains, turn left for the café, and follow the coastline to the beach”—in Angular, I write these instructions in a routing module.

Here’s how I think of it. I grab my “map” (a JavaScript object), and for every destination, I set up a rule: if someone follows this path (a URL like /mountains), they’ll land at this place (a component like MountainsComponent). It’s all about connecting the dots.

Then, just like I would share my road trip instructions with everyone in the car, I tell Angular to use this map by adding it to the app module. Now, everyone knows where to go when they see a path!

But wait—sometimes, I need to say, “Hey, don’t go here unless you have a key, like a reservation.” In Angular, that’s like adding a guard to a route to make sure only the right people can enter.

Finally, I make signs along the road, so people can click them to go somewhere else. In my app, these are the routerLinks, which let users navigate easily.

Angular routing? It’s just me being a road trip planner, connecting destinations and making sure everyone knows how to get where they need to go. 🚗✨

---

Setting Up Routes

Imagine we want three destinations: Home, About, and Contact. I create a routes array that defines the paths to these destinations.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default path
  { path: 'about', component: AboutComponent }, // About page
  { path: 'contact', component: ContactComponent }, // Contact page
];

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

Here’s what this does:

• path: This is the URL segment (like /about).
• component: This is the component to load for that path.

The RouterModule.forRoot(routes) tells Angular: “Here’s the map. Use it.”

---

Navigating Between Routes

Now, I need clickable signs for navigation. In Angular, I use routerLink in my templates.

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

<router-outlet></router-outlet>

• routerLink: Works like a hyperlink but tells Angular to navigate to a route.
• <router-outlet>: Think of this as a placeholder for the component tied to the current route. If someone visits /about, the AboutComponent renders here.

---

Adding Route Guards

Remember the “keys to enter” analogy? That’s done with route guards. For instance, only logged-in users can access the Contact page.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    // Replace this with your real authentication logic
    const isLoggedIn = !!localStorage.getItem('user');
    return isLoggedIn;
  }
}

I add the guard to the route:

{ path: 'contact', component: ContactComponent, canActivate: [AuthGuard] }

---

Key Takeaways 🚦

1. Routes define the structure of your app: The routes array maps paths to components.
2. RouterModule handles navigation: Use RouterModule.forRoot(routes) to register the routes.
3. Navigation is simple with routerLink: Users can click links to move between views.
4. Guards add security: Use guards to control access to specific routes.