Page navigation bar in Angular.js
http://amitgharat.wordpress.com/2012/09/19/page-navigation-bar-in-angular-js/
by manoj
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div class="well sidebar-nav" ng-app="navList">
<ul class="nav nav-list" ng-controller="navCtrl">
<li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a>
</li>
</ul>
</div>
JavaScript
var navList = angular.module('navList', []);
navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.navLinks = [{
Title: 'home',
LinkText: 'Home',
}, {
Title: 'about',
LinkText: 'About Us'
}, {
Title: 'contact',
LinkText: 'Contact Us'
}];
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'home';
return page === currentRoute ? 'active' : '';
};
}]);