How to determine active route in AngularJS ? Last Updated : 06 Sep, 2022 Comments Improve Suggest changes Like Article Like Report 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: HTML <!DOCTYPE html> <html> <head> <title>Angular JS Active Route</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>How to determine active route in AngularJS ?</h3> <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> Output: Comment More infoAdvertise with us Next Article How to determine active route in AngularJS ? P pratyushranjan14 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to detect a route change in AngularJS ? 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/vi 2 min read How to execute a routing in the AngularJS framework ? In this article, we will learn about how we can perform routing in AngularJS, along with understanding its implementation through the code example.  Routing in AngularJS helps to develop Single Page Applications, which is a web app that loads only a single page, and the part of the page instead of t 6 min read Styling Active Router Link in Angular Styling the active router link in angular allows the user to differentiate between the active router link and inactive router links. Angular provides a special mechanism to work with active router links. Approach: Create the Angular app to be used.Create the header component that contains the navi 2 min read How to Get All Route Params/Data in Angular? In Angular, managing route parameters and extracting data from routes is important for creating dynamic and responsive web applications. Route parameters allow you to pass information in URLs, and accessing this data enables your application to make decisions and render content dynamically. This art 4 min read How to set active tab style with AngularJS ? In this article, we will see how to set an active tab style using AngularJS, & will also understand its implementation through the example. This task can be accomplished by implementing the isActive and the ng-controller method. We will perform this task with 2 different methods. Method 1: The n 2 min read How to access the Scope from outside JS Function in AngularJS ? In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a 4 min read How do you configure routes in Angular? In Angular, configuring routes is an important part of building single-page applications (SPAs) and managing navigation between different components. By defining routes, we can map URLs to specific components, enabling users to access different views within our application. This enhances user experi 5 min read How to generate a route in Ember.js ? Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. 2 min read How to Get Page Load Time in Angular? In web development, performance is the most important thing. Users expect fast and responsive web applications and even minor delays can impact user experience and satisfaction. Monitoring page load time is important for identifying performance bottlenecks and optimizing the user experience. In this 5 min read Like