add Bootstrap active class based on route change in Angular

Question

I am trying to add a class (bootstrap active class) using Angular ngClass on my navigation menu, based on the path.
navigationMain template:

<div class="section">
<div class="container">
    <div class="row">
        <div class="col-md-12" ng-controller="MainCtrl">
            <ul class="nav nav-pills nav-justified" style="width:30%">
                <li ng-class="{active: location === '#!/home', nav-item}">
                    <a href="#!/home">Home</a>
                </li>
                <li ng-class="{active: location === '#!/resume', nav-item}">
                    <a href="#!/resume">CV</a>
                </li>
                <li ng-class="{active: location === '#!/overviewActivities', nav-item}">
                    <a href="#!/overviewActivities">I-Talent</a>
                </li>
            </ul>
        </div>
    </div>
</div>

app.module.js:

angular.
    module('iTalentApp', [
    'ngRoute',
    'home',
    'resume',
    'navigationMain'
]).controller('MainCtrl', function ($scope, $rootscope, $location) {
    $scope.location = $location.path();
    $rootScope.$on('$routeChangeSuccess', function () {
        $scope.location = $location.path();
    });
});

index.html:

<body>
    <navigation-main></navigation-main>
    <div ng-view></div>
  </body>

And my config:

angular.
module('iTalentApp').
config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('!');

        $routeProvider.
            when('/home', {
                template: '<home></home>'
            }).
            when('/resume', {
                template: '<resume></resume>'
            }).
            when('/overviewActivities', {
                template: '<overview-activities></overview-activities>'
            }).
            otherwise('/home');
    }
]);

I tried to implement the solution to this question, adding or removing classes based on route changes in angular but to no avail. Can anyone point out what I'm doing wrong?

this is what i'm trying to achieve but in a single page with angular, http://plnkr.co/edit/FNwIAU4OgQHlREIfi4BG I got it working except the conditional active class when they are used. (I'm also fairly new to html, css and js)

edit: errormessage:

angular.js:14199 Error: [$injector:unpr] Unknown provider: $rootscopeProvider <- $rootscope <- MainCtrl
http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24rootscopeProvider%20%3C-%20%24rootscope%20%3C-%20MainCtrl
    at angular.js:68
    at angular.js:4563
    at Object.getService [as get] (angular.js:4716)
    at angular.js:4568
    at getService (angular.js:4716)
    at injectionArgs (angular.js:4741)
    at Object.invoke (angular.js:4763)
    at $controllerInit (angular.js:10592)
    at nodeLinkFn (angular.js:9469)
    at compositeLinkFn (angular.js:8810)

Check if this helps: http://stackoverflow.com/a/22128830/949476 — dfsq, Apr 12 '17 at 09:03
@dfsq I'm going to be honest, I tried using that but my knowledge of JavaScript is still just not enough to understand where i need to edit that piece of code and where to place it. I found an error message in my log and will edit my question with it if you could take a look? — Erik, Apr 12 '17 at 09:16
oh jeez, i injected $rootscope instead of $rootScope. Thank you so much for finding that. It works now! (also needed to remove the nav-item from ng-class, and remove !# from the location expression: location ==='/path') — Erik, Apr 12 '17 at 09:25

score 0 · Accepted Answer · answered Apr 12 '17 at 09:34

Since we found what was wrong in the comments I'll take the time to write an answer for future reference, The problems were:
- spelling error in controller, changed $rootscope into $rootScope,
- wrong use of ng-class syntax, removed nav-item.
- mistake in the expression of ng-class, location==='#!/path' changed into location==='/path'.
Kudos to @dfsq

add Bootstrap active class based on route change in Angular

1 Answers1