Skip to content
Related Articles

Related Articles

How to determine active route in AngularJS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Nov, 2019

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.


$rootScope.$on('$routeChangeStart', function () {

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

<!DOCTYPE html>
    <title>Angular JS Active Route</title>
    <script src
    <script src
<body style = "text-align:center;"
    <h1 style = "color:green;"
    <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>
        var mainApp = angular.module("mainApp", ['ngRoute']);
        mainApp.config(['$routeProvider', function($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>"
                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();


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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!