How to determine active route in AngularJS ?

The task is to determine the active route in AngularJS.

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 what 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 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:

File name: Active_Route.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>Angular JS Active Route</title>
    <script src
    </script>
      
    <script src
    </script>
</head>
      
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <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>

chevron_right


Output:

  • When 1st link is clicked:
  • When 2nd link is clicked:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.