angularjs_navmenu

Simple angularjs navmenu concept via an angular module that applies class 'active' to the selected menu item.

by Steve Titus

HTML

<html ng-app="testapp">
    
    <body>
        <div>
            <ul ng-controller="navCtrl">
                <li ng-repeat="navLink in navLinks"> <a href='#/{{navLink.Title}}' ng-class="navClass('{{navLink.Title}}')">{{navLink.LinkText}}</a> 
                </li>
            </ul>
        </div>
    </body>

</html>

JavaScript

var app_module = angular.module('testapp', [])

app_module.controller('navCtrl', ['$scope', '$location',

function ($scope, $location) {
    $scope.navLinks = [{
        Title: 'home',
        LinkText: 'Home',
    }, {
        Title: 'teams',
        LinkText: 'Teams'
    }, {
        Title: 'events',
        LinkText: 'Events'
    }, {
        Title: 'venues',
        LinkText: 'Venues'
    }, {
        Title: 'settings',
        LinkText: 'Settings'
    }];

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        console.log("evaluating route: " + currentRoute + ", against page: " + page);
        var active = (page === currentRoute ? 'active' : '');
        return active;
    };

}]);