How to detect a route change in AngularJS ?

Last Updated : 06 Sep, 2022

In this article, we will see how to detect a route change in AngularJS. In order to detect route change at any moment in AngularJS, this can be achieved by using the $on() method. The $on() method is an event handler, the event which will handle $routeChangeSuccess which gets triggered when route/view change is done.

Syntax:

$rootScope.$on('$routeChangeSuccess', function () {
    Content...
});

Approach: Here, we are displaying "route changed" in the console window whenever there is any route change. Inside the $on() method, we console route changed. Hence, In this way whenever route change occurs, it triggers $routeChangeSuccess handled by $on() event handler, and then "route changed" is displayed in the console window.

Example: This example describes the process to detect a route change in AngularJS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Angular JS Route Change</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>Detecting the route change in AngularJS </h3>
    <div>
        <p>
            <a href="#viewLink1">Link 1</a>
        </p>
        <p>
            <a href="#viewLink2">Link 2</a>
        </p>
        <div ng-app="mainApp" ng-controller="GFGController">
            <div ng-view></div>
        </div>
    </div>
        <script>
            var mainApp = angular.module("mainApp", ['ngRoute']);
            mainApp.config(['$routeProvider', function($routeProvider) {
                $routeProvider.when('/viewLink1', {
                    template: "<p> This is Link 1 </p>"
                }).when('/viewLink2', {
                    template: "<p> This is Link 2 </p>"
                }).otherwise({
                    redirectTo: '/viewLink1'
                });
            }]);
            mainApp.controller('GFGController', 
            function($scope, $location, $rootScope) {
                $rootScope.$on('$routeChangeSuccess', function() {
                    console.log("route changed");
                });
            });
        </script>
</body>
</html>

Output: As we change the link, the $routeChangeSuccess event gets triggered, and thus displays route changes in the console window.