Angular: Empty Fiddle

http://angularjs.org/

by Nikhil krishnan

HTML

<script type="text/ng-template" id="partials/dashboard">
    Dashboard content
</script>
<script type="text/ng-template" id="partials/lab">
    Lab content
</script>

<div ng-controller="MyCtrl">
    <ul>
        <li ng-class="{active:isActive('/dashboard')}"><a href="#/dashboard">Dashboard</a></li>
        <li ng-class="{active:isActive('/lab')}"><a href="#/lab">Lab</a></li>
    </ul>
    <hr>
    <div ng-view></div>
</div>

CSS

.active {
    background-color : green
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();
    }
});


myApp.config(function($routeProvider) {
       
    $routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:'WidgetsController'})
    .when('/lab', {templateUrl:'partials/lab', controller:'WidgetsController'})
});