var app = angular.module('plunker', []);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/jobs', {templateUrl: 'jobs-partial.html', controller: JobsCtrl }).
when('/invoices', {templateUrl: 'invoices-partial.html', controller: InvoicesCtrl }).
when('/payments', {templateUrl: 'payments-partial.html', controller: PaymentsCtrl }).
otherwise({redirectTo: '/jobs'});
// make this demo work in plunker
$locationProvider.html5Mode(false);
}]);
function TabsCtrl($scope, $location) {
$scope.tabs = [
{ link : '#/jobs', label : 'Jobs' },
{ link : '#/invoices', label : 'Invoices' },
{ link : '#/payments', label : 'Payments' }
];
$scope.selectedTab = $scope.tabs[0];
$scope.setSelectedTab = function(tab) {
$scope.selectedTab = tab;
}
$scope.tabClass = function(tab) {
if ($scope.selectedTab == tab) {
return "active";
} else {
return "";
}
}
}
function JobsCtrl($scope) {
}
function InvoicesCtrl($scope) {
}
function PaymentsCtrl($scope) {
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="app.js"></script>
</head>
<body>
<ul class="nav nav-tabs" ng-controller="TabsCtrl">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>
<div ng-view></div>
</body>
</html>
/* Put your css in here */
Jobs Tab
Invoices
Payments