How to determine active route in AngularJS ?

Last Updated : 06 Sep, 2022

In this article, we will see how to determine the active route in AngularJS, along with understanding the basic implementation through the example.

Approach: To determine which is the active route at any moment in AngularJS this can be achieved by using $on() & $location.path() method. An event can be handled by writing an event handler using a $on() method. The $routeChangeStart is an event that gets triggered when route change is initiated so, that is handled by $rootScope.$on(). Hence, In this way whenever route change is initiated, it triggers $routeChangeStart handled by $on() event handler, and then $location.path() gives the value of the active route.

Syntax:

$rootScope.$on('$routeChangeStart', function () {
    console.log($location.path())
});

Example: Here, we are displaying which is the active route. Inside the $on() method initialize $location.path() value to any AngularJS scope variable and through expressions (data-binding) display its details. Below is the implementation of the above approach:

Active_Route.html:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Angular JS Active Route</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
    </script> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"> 
    </script> 
</head> 
  
<body style="text-align: center"> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <h3>How to determine active route in AngularJS ?</h3> 
    <p> 
        <a href="#viewLanguages">View Languages</a> 
    </p> 
    <p> 
        <a href="#viewCourses">View Courses</a> 
    </p> 
    <div ng-app="mainApp" ng-controller="GFGController"> 
        <div ng-view></div> 
        <p>{{ message }}</p> 
        <p>{{ mylocation }}</p> 
    </div> 
  
    <script> 
        var mainApp = angular.module('mainApp', ['ngRoute']); 
        mainApp.config([ 
          '$routeProvider', 
          function ($routeProvider) { 
            $routeProvider 
          
              .when('/viewLanguages', { 
                template: 
                  '<p> Details of all languages content ' + 
                  'available at GeeksforGeeks </p>', 
              }) 
          
              .when('/viewCourses', { 
                template: 
                  '<p> Details of all courses available at' + 
                  ' GeeksforGeeks</p>', 
              }) 
          
              .otherwise({ 
                redirectTo: '/viewLanguages', 
              }); 
          }, 
        ]); 
          
        mainApp.controller( 
          'GFGController', 
          function ($scope, $location, $rootScope) { 
            $scope.message = 
              'This page will be used to promote' + ' GeeksforGeeks'; 
            $rootScope.$on('$routeChangeStart', function () { 
              $scope.mylocation = $location.path(); 
            }); 
          } 
        ); 
    </script> 
</body> 
  
</html>