How to set bootstrap navbar active class with Angular JS?

AngularJS directives approach

A more advanced way to handle this is through an AngularJS directive, such as bs-active-link. This directive automatically updates the active class on its parent <ul> by iterating over the <a> tags:

app.directive('bsActiveLink', ['$location', function($location) {
    return {
        restrict: 'A',
        link: function(scope, elem) {
            // "I see dead links" - $location probably
            scope.$watch(function() {
                return $location.path();
            }, function(newValue) {
                // Kind of like playing "Where's Waldo?" but with links
                angular.forEach(elem.find('a'), function(item) {
                    if (item.href.match('#' + newValue + '(?:/|$)')) {
                        angular.element(item).addClass('active'); // Active? I'd say it's Hyperactive!
                    } else {
                        angular.element(item).removeClass('active');
                    }
                });
            });
        }
    };
}]);


Rope in AngularStrap for help

AngularStrap is a set of native directives that allows automatic active class updates. To use bsNavbar, include the AngularStrap script after bootstrap.js.

<ul class="nav navbar-nav" bs-navbar>
    <li data-match-route="/home"><a href="#/home">Home</a></li>
    <li data-match-route="/about"><a href="#/about">About</a></li>
    <li data-match-route="/contact"><a href="#/contact">Contact</a></li>
</ul>


Angular (2+) clean way

For those using Angular (2+), the routerLinkActive directive makes managing active classes plain sailing:

<li routerLink="/home" routerLinkActive="active">Home</li>
<li routerLink="/about" routerLinkActive="active">About</li>
<li routerLink="/contact" routerLinkActive="active">Contact</li>


Please note this might require adjustments if you're combining AngularJS and Angular.

Mitigating potential mishaps

Consider the following while implementing:

• Route configuration: Always ensure that your individual routes are defined consistently.
• Controller scope: Placement of controllers is crucial as ng-view can reset the navbar state.
• Page reloads: Your navbar state should align with the Single Page Application (SPA) philosophy.
• $location service configuration: HTML5 mode or hashbang mode must align with your isActive checks.

Refining for Maintenance and Usability

A few tips to optimize user experience and manage code:

• Directives and attributes encapsulate behavior, thereby improving maintainability.
• Clear visual cues enhance user orientation significantly, making the application more intuitive.
• Consistent coding practices provide the benefits of non-redundant, scalable code.