Open In App
Related Articles

How to determine active route in AngularJS ?

Improve Article
Save Article
Like Article

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. 


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



<!DOCTYPE html>
    <title>Angular JS Active Route</title>
    <script src=
    <script src=
<body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>How to determine active route in AngularJS ?</h3>
        <a href="#viewLanguages">View Languages</a>
        <a href="#viewCourses">View Courses</a>
    <div ng-app="mainApp" ng-controller="GFGController">
        <div ng-view></div>
        <p>{{ message }}</p>
        <p>{{ mylocation }}</p>
        var mainApp = angular.module('mainApp', ['ngRoute']);
          function ($routeProvider) {
              .when('/viewLanguages', {
                  '<p> Details of all languages content ' +
                  'available at GeeksforGeeks </p>',
              .when('/viewCourses', {
                  '<p> Details of all courses available at' +
                  ' GeeksforGeeks</p>',
                redirectTo: '/viewLanguages',
          function ($scope, $location, $rootScope) {
            $scope.message =
              'This page will be used to promote' + ' GeeksforGeeks';
            $rootScope.$on('$routeChangeStart', function () {
              $scope.mylocation = $location.path();



Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Sep, 2022
Like Article
Save Article
Similar Reads
Related Tutorials