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>