CODEWITHSUNDEEP
javascriptangularjsngroute
Erik
Erik

Reputation: 371

add Bootstrap active class based on route change in Angular

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)

Upvotes: 0

Views: 511

Answers (1)

Erik
Erik

Reputation: 371

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

Upvotes: 0

Related Questions