A Complete Guide To Angular Routing

We are certain that you’ve observed that the URL of the application that you’re using changes every time you click on a link on the user interface. This is because you’re navigating throughout the application, and it achieves this with the help of a common mechanism called Routing. 

Now that you have an idea about routing, the subsequent sections will help you understand how it is achieved in Angular. 

What is Angular Routing?

In Angular, routing plays a vital role since it is essentially used to create Single Page Applications. These applications are loaded just once, and new content is added dynamically. Applications like Google, Facebook, Twitter, and Gmail are a few examples of SPA. The best advantage of SPA is that they provide an excellent user experience and you don’t have to wait for pages to load, and by extension, this makes the SPA fast and gives a desktop-like feel. 

It generally specifies navigation with a forward slash followed by the path defining the new content. 

Now that you know that routing plays a vital role in Angular, let us guide you through the working of the same with the help of a demo.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Demo: Navigating to the Login Page of a Web Application

The aim of the demo is to create routes for the login option on the navigation bar of an application. 

Step 1: Create an application folder using the command. 

ng create <name_application>

Step 2: Make sure that it includes the base tag in the index.html file of your application. Although this is generally added when your app is created, if it’s not, then add a base tag with href attribute set to a forward slash. It requires this so that the application knows how to construct the URL while navigating. 

<base href="/">

Step 3: The app.routing.module.ts contains the routing module for the application. This app is used to configure differently. We should import this module in the app.module.ts file. 

import { AppRoutingModule } from './app-routing.module';

Also, make sure to specify the module in the import array. 

Step 4: Generate the component to display the login page content. I have used Bootstrap to define the user interface for this file. We highly recommend you check out the article and/or video tutorial on Angular Bootstrap. 

ng g c login 

Here’s the code for the login.component.html file:  

<div class="wrapper fadeInDown">

    <div id="formContent">

      <!-- Tabs Titles -->

      <!-- Icon -->

      <div class="fadeIn first">

        <img src="assets/Logo.png" id="icon" alt="User Icon" style="height: 100px; width: 250px;"/>

      </div><br><br>

      <!-- Login Form -->

      <form>

        <input type="text" id="login" class="fadeIn second" name="login" placeholder="login"><br><br>

        <input type="text" id="password" class="fadeIn third" name="login" placeholder="password"><br><br>

        <input type="submit" class="fadeIn fourth" value="Log In">

      </form><br>

      <!-- Remind Passowrd -->

      <div id="formFooter">

        <a class="underlineHover" href="#">Forgot Password?</a>

      </div><br>

      <div id="formFooter" >

        <a class="underlineHover" href="#" style="color:rgb(241, 148, 41)">New User? Register here</a>

      </div>

    </div>

  </div>    

  <script type="text/javascript">

          </script>

You can write your own piece of code for the different components you wish to navigate to. 

Master Core Java 8 Concepts, Java Servlet & More!

Java Certification TrainingENROLL NOW

Step 5: The next step is to configure the route for the application. 

import { NgModule } from '@angular/core';

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

import { LoginComponent } from './login/login.component';

const routes: Routes = [ 

  {path: 'login', component: LoginComponent},

]

@NgModule({ 

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

The constant routes are strongly typed to Routes from the router package. It defines all the possible routes in this array. Each route is nothing but an object with a path (that is seen in the URL) and the component to be rendered when you navigate to that corresponding path. Go ahead, and create a path for your Login component and specify the component property. 

Step 5: We saw that a navigation bar was present at the top of the web application with different options. So, I’ve created a component called navbar for the same. I’ve used the bootstrap template in the navbar.component.html file. 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

    <div class="container">

      <a class="navbar-brand" href="#">Simplilearn</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav ml-auto">

          <li class="nav-item">

            <a class="nav-link" href="#”>Home</a>           

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">About</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Services</a>

          </li>

          <li class="nav-item">

            <nav>

              <a class="nav-link" href="#" routerLink = "/login" routerLinkActive= "active">Login</a></nav>

          </li>

        </ul>

      </div>

    </div>

  </nav>

To navigate to the login page, we have created a button within a nav tag and an anchor. Two directives from the router package called, routerLink and routerLinkActive are specified within the anchor tag. The former holds the path to the login page and the latter specifies one or more CSS classes that will be applied when the corresponding router link is active. 

We’ve highlighted the code for better visibility. 

Step 6: Despite all of this, how are we specifying where these components are to be displayed? The answer is the router-outlet directive from the router package. In the app.component.html, go ahead and create a custom tag for the same. 

  <app-navbar></app-navbar>

  <router-outlet></router-outlet>   

Step 7: Go ahead and run your application using the ng serve command. 

The output will look like this: 

Once the login icon on the navigation bar is clicked, the UI changes to this: 

As you can see, the path to the login component is specified in the URL. 

So this was a simple tutorial to demonstrate Angular routing. You can create multiple such routes and interactive components. 

Accelerate your career as a skilled MERN Stack Developer by enrolling in a unique Full Stack Developer - MERN Stack Master's program. Get complete development and testing knowledge on the latest technologies by opting for the MERN Stack Developer Course. Contact us TODAY!

Next Steps

We hope that this article on Angular Routing helped you understand how to create and configure routes. But, if you wish to learn Angular and perhaps make a career out of it, certification will come in handy.

Simplilearn's Full Stack Java Developer helps you master front-end web development with Angular. You will learn the knack of creating applications with the help of concepts like facilitating the development of single-page web applications, components, typescript, dependency injection, and directives with this course. The course also includes a real-time project to test your skills. 

If you have feedback or questions, drop us a comment in the comments section. Our experts will get back to you ASAP!