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:
<!DOCTYPE html> <html>
<head>
<title>Angular JS Active Route</title>
<script src=
</script>
<script src=
</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: