How to set active class on the current state using angular-route?

Question

my route file

app.config(["$routeProvider",function($route)
{
    $route.when("/",{
        templateUrl : "partials/index.html",
        controller : "AppCtrl"
    }).when("/contact",{
        templateUrl:"partials/contact.html",
        controller:"ContactCtrl"
    }).
    when("/about-us",{
        templateUrl:"partials/about.html",
        controller:"AboutCtrl"
    }).
    when("/gallery",{
        templateUrl:"partials/gallery.html",
        controller:"GalleryCtrl"
    }).
    otherwise({
        redirectTo:"/"
    });

}]);

in my header.html partials i'm using HeaderCtrl controller

app.controller("HeaderCtrl",["$scope","$location",function($scope,$location)
{
    $scope.location=$location.path().replace("/","");
}]);

my header.html

<ul ng-controller="HeaderCtrl">
    <li ng-class="{active:location===''}"><a href="#">home</a></li>
    <li ng-class="{active:location==='about-us'}"><a href="#/about-us">about us</a></li>
    <li ng-class="{active:location==='gallery'}"><a href="#/gallery">gallery</a></li>
    <li ng-class="{active:location==='contact'}"><a href="#/contact">contact</a></li>
</ul>

when the page reloads (actual refresh) then it works ie the class active is applied on the respective li but when i change the routes (by clicking on the menu items) it doesn't work

Answer 1

The solution to your problem is to bind an event that updates $scope.location when the URL successfully changes. You don't have to bind a click event to each <li> element. What if the route is invalid or fails? You don't want to show the user that element is the active route when it's really not.

If you read the documentation on the $location service, you'll see an events section. The one we're interested in is $locationChangeSuccess. To wire it up in your controller, do this:

$scope.$on('$locationChangeSuccess', function () {
  $scope.location = $location.path().replace('/', '');
});

Answer 2

you add some object like active to router and set condition on your html with ngClass

like this :

app.config(["$routeProvider",function($route)
    {
        $route.when("/",{
            templateUrl : "partials/index.html",
            controller : "AppCtrl",
            active:'home',
        }).when("/contact",{
            templateUrl:"partials/contact.html",
            controller:"ContactCtrl",
             active:'contact',
        }).
        when("/about-us",{
            templateUrl:"partials/about.html",
            controller:"AboutCtrl",
             active:'about',
        }).
        when("/gallery",{
            templateUrl:"partials/gallery.html",
            controller:"GalleryCtrl"
            active:'GalleryCtrl',
        }).
        otherwise({
            redirectTo:"/"
        });

    }])
    //remember that add $route inside the scope 
    .controller("HeaderCtrl",["$scope","$location",function($scope,$route)
    {
      $scope.$route = $route;
      
    }]);

.active{
  color:#a33;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<ul ng-controller="HeaderCtrl">
    <li data-ng-class="{'active':$route.current.active === 'home'}"><a href="#">home</a></li>
    <li data-ng-class="{'active':$route.current.active === 'about'}"><a href="#/about-us">about us</a></li>
    <li data-ng-class="{'active':$route.current.active === 'gallery'}"><a href="#/gallery">gallery</a></li>
    <li data-ng-class="{'active':$route.current.active === 'contact'}"><a href="#/contact">contact</a></li>
</ul>