To set bootstrap navbar active class with AngularJS there is a very elegant way is to use ng-controller to run a single controller outside of the ng-view see the code below:-
<div class="collapse navbar-collapse"
ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}">
<a href="/">Home</a></li>
<li ng-class="{ active: isActive('/dogs')}">
<a href="/dogs">Dogs</a></li>
<li ng-class="{ active: isActive('/cats')}">
<a href="/cats">Cats</a></li>
</ul>
</div>
<div ng-view></div>
Looking for Angularjs material from basics! Refer to this video on Angularjs provided by Intellipaat:
Looking for Angularjs material from basics! Refer to this video on Angularjs provided by Intellipaat:
And include in controllers.js:
function HeaderController($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}