How to determine active route in AngularJS ?

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:

Output: