Basics of Routing in Angular

Single-page applications (SPAs) have revolutionized the way traditional frontend development used to operate. SPAs are easy to navigate, performance-beneficent, and allow the developers to write clean and less redundant code. Angular is one of the finest frontend development
frameworks that has contributed a great deal in this era of change. It has made the development of SPAs so simple and efficient that the trust in applications that are built with Angular is huge.

In this article, we will discuss a core concept of Angular development i.e. routing. As we know Angular operates on the primary flow of creating components, so to navigate among different components we use the idea of routing. Stick with us till the end to further solidify your grip on Angular’s routing mechanism.

What is Routing in Angular?

Routing in Angular is a way to navigate or shift from one view to another inside an Angular application. Even though the core focus of routing is to handle application development but, on top of it, we can implement route guards and facilitate lazy loading of modules in order to provide a safe and performance-efficient user experience. We can define multiple routing paths
to configure router states which eventually gets interpreted as a tree of router states inside the Angular engine.

Now that we know about the basics of routing in Angular, let’s look at how we can configure a router inside an Angular application.

Configuring the Angular Router

Every Angular application has the main parent component called app. In this parent directory, locate the app.module.ts file. The contents of the file look like follows.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Every new component that we import should be registered inside the declarations array of NgModule decorator whereas every new module that we import goes inside the imports array.

Just for understanding the purpose of routing, suppose that your main HTML file, app.component.html, looks like this.

<h1>Basics of Angular Routing (Tutorial)</h1>

Now suppose that you have created a new component called HomeComponent and you want to navigate to that component using a hyperlink. For that, you should first register your new component inside app.module.ts. The updated file looks like follows.

import { BrowseeModule } from 1@angular/platform—browser'; 
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home—component/home—component.component';
@NgModule({ 
   declarations: [ 
      AppComponent,
      HomeComponent 
   ], 
   imports: [ 
      BrowserModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

You can clearly see that we have now registered to HomeComponent inside the declarations array which means that this component is accessible within our application.

Once the component is registered, you can now configure the router for this component inside app.module.ts. Finally, the file looks like this.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule} from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home-component/home-component. component'; 
@NgModule({ 
   declarations: [ 
      AppComponent,
      HomeComponent 
   ], 
   imports: [ 
      BrowserModule,
      RouterModule.forRoot([ 
         { 
           path: 'home-component', 
           component: HomeComponent 
         } 
      ]) 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

After reading the above code, did you figure out what we added? We added the following piece of code which basically initiates the RouterModule so that our routing states can be configured.

RouterModule.forRoot([ 
   { 
      path: 'home-component', 
      component: HomeComponent 
   } 
])

After adding the above piece of code, the URL path <domain>/home-component will navigate you to the HomeComponent that we created.

Once we have all the setup ready, now it is time to experiment that the route we configured is actually working or not! In the app.component.html file, link a hyperlink to the home-component. Don’t forget to add the router-outlet tag as it tells the HTML file that it can further initiate redirections to components.

<h1>Basics of Angular Routing (Tutorial)</h1> 
<a routerLink="home-component">Click here to go to HomeComponent</a>
<router-outlet></router-outlet>

After setting up everything as we discussed, upon clicking the “Click here to go to HomeComponent” link on your browser, you’ll see that the app has successfully navigated to HomeComponent and that we have properly implemented our first routing mechanism inside Angular.

Conclusion

That was all about routing in Angular. It is indeed a really important concept to grasp in order to master the navigation between components within an Angular application. The better the routing, the smoother the app experience will be. We hope that it was a learning-friendly read for you and that you got a basic idea as to how to go about implementing routing in Angular.