Navigating in Angular – Mastering Angular (Part 5)

In Angular, routing is a mechanism that helps us navigate between different pages of our application without having to manually reload the entire page. This not only improves the user experience by making the application feel more like a traditional desktop application, but it also makes the application easier to manage and scale.

In this tutorial, we will delve into the basics of routing in Angular. This is the fifth part of our "Learning Angular" series, where we cover various aspects of Angular development in a step-by-step manner.

Setting up a new Angular project:
Before we dive into routing, let’s make sure we have a new Angular project set up. If you haven’t already done so, you can create a new Angular project using the Angular CLI by running the following command:

ng new my-angular-app

Once your project is set up, navigate into the project directory:

cd my-angular-app

Creating a new component:
Next, let’s create a new component that we can use for routing. In this tutorial, we will create a simple component called HomeComponent. To generate a new component, run the following command:

ng generate component home

This will create a new folder called home inside the src/app folder, which contains the necessary files for the HomeComponent.

Setting up routing in Angular:
Angular uses a module called RouterModule to facilitate routing in our application. Before we start using routing, we need to import the RouterModule into our main Angular module (app.module.ts) and configure it with the routes for our application.

In your app.module.ts file, import the RouterModule from @angular/router:

import { RouterModule } from '@angular/router';

Next, define the routes for your application. Create an array of Route objects that represent the different routes in your application. Each Route object should contain a path that defines the URL for the route and a component that should be displayed when the route is activated.

const routes = [
  { path: '', component: HomeComponent },
  // Add more routes here as needed
];

Then, import the routes array and the RouterModule into the imports array of the @NgModule decorator in your app.module.ts file:

@NgModule({
  declarations: [ // Add your components here ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // Add this line to enable routing
  ],
  providers: [ // Add your services here ],
  bootstrap: [AppComponent] // Change AppComponent to the root component of your application
})
export class AppModule { }

After setting up routing in your main Angular module, you can start adding links to navigate between different routes in your application. You can add links in your HTML template files using the routerLink directive.

In your HomeComponent component HTML file, add a link to navigate to a new route:

<a routerLink="/about">Go to About</a>

When the user clicks on this link, Angular will navigate to the /about route and display the component associated with that route.

Accessing route parameters:
In many applications, you may need to retrieve data from the URL to fetch specific content or process information. Angular allows us to access route parameters by using the ActivatedRoute service provided by @angular/router.

To access route parameters, inject the ActivatedRoute service into your component and use its snapshot property to access the parameters:

import { ActivatedRoute } from '@angular/router';

export class HomeComponent {
  constructor(private route: ActivatedRoute) {
    const id = this.route.snapshot.params.id;
    console.log(`Route parameter id: ${id}`);
  }
}

In this example, we are retrieving the route parameter with the name id from the URL and logging it to the console.

Handling route changes:
You can also listen for route changes by subscribing to the router events emitted by the Router service provided by @angular/router.

To listen for route changes, inject the Router service into your component and subscribe to the events property:

import { Router, NavigationEnd } from '@angular/router';

export class HomeComponent {
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log('Route changed:', event.url);
      }
    });
  }
}

In this example, we are listening for navigation end events and logging the URL of the new route to the console.

Conclusion:
Routing is an essential feature in Angular applications that allows us to navigate between different parts of our application seamlessly. By following the steps outlined in this tutorial, you can set up routing in your Angular project and start building more dynamic and interactive applications.

I hope you found this tutorial helpful in learning about routing in Angular. Stay tuned for more tutorials in our "Learning Angular" series!