Angular Active Navigation

Angular Navigation with CSS "active" class

HTML

<base href="/" />
<body ng-app="demo">
    <div ng-controller="DemoCtrl">
        
         {{ routeClass }}<BR><BR><BR>
        {{ activeNav }}
        
        
        
        <ul>
            <li ng-class="{ active: route.current.activeNav === 'navA' }"><a href="/one">Link 1</a>
            </li>
            <li ng-class="{ active: route.current.activeNav === 'navB' }"><a href="/two">Link 2</a>
            </li>
            <li ng-class="{ active: route.current.activeNav === 'navC' }"><a href="/three">Link 3</a>
            </li>
        </ul>
        <div ng-view></div>
    </div>
    <script type="text/ng-template" id="/view1.html">
        First View
    </script>
    <script type="text/ng-template" id="/view2.html">
        Second View
    </script>
    <script type="text/ng-template" id="/view3.html">
        Third View
    </script>
</body>

CSS

</style> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script> <style> li {

    display: inline-block;

    width: 4em;

    padding: 1em;

    border: 2px solid blue;

    text-align: center;

}

li.active {

    background: blue;

}

li a {

    text-decoration: none;

}

li.active a {

    color: white;

}

JavaScript

angular.module('demo', ['ngRoute'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/one', {
        templateUrl: '/view1.html',
        controller: 'DemoCtrl',
        activeNav: 'navA',
        routeClass: 'some-class'
    })
        .when('/two', {
        templateUrl: '/view2.html',
        controller: 'DemoCtrl',
        activeNav: 'navB'
    })
        .when('/three', {
        templateUrl: '/view3.html',
        controller: 'DemoCtrl',
        activeNav: 'navC'
    })
        .otherwise({
        templateUrl: '/view1.html',
        controller: 'DemoCtrl',
        activeNav: 'navA',            
        routeClass: 'some-class'
    });
}])
    .run(function ($rootScope) {
        
$rootScope.$on("$routeChangeStart", function(event, next, current) {
    $rootScope.routeClass = next.routeClass;
    $rootScope.activeNav = next.activeNav;
});





})
    .controller('DemoCtrl', ['$scope', '$route', function ($scope, $route) {
    $scope.route = $route;
}]);