<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script data-require="ui-bootstrap@1.1.1" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="style.css" rel="stylesheet" />
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
</style>
</head>
<body class="ng-cloak" ng-cloak="" ng-app="hello">
<div class="container" ng-controller="navigation">
<!-- <ul role="tablist" class="nav nav-pills">
<li ng-class="{active:tab('home')}">
<a href="#/">home</a>
</li>
<li ng-class="{active:tab('someroute')}">
<a href="#/someroute">some route</a>
</li>
</ul>
-->
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}">
<a href="#/">Home</a>
</li>
<li uib-dropdown>
<a ng-class="{active:tab('someroute')}" uib-dropdown-toggle data-toggle="dropdown" href="#">Drop down
<span class="caret"></span>
</a>
<ul uib-dropdown-menu>
<li ng-class="{active:tab('someroute')}">
<a href="#/someroute">some route</a>
</li>
<li ng-class="{active:tab('home')}">
<a href="#/">home</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="container" ng-view=""></div>
<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="someroute.js"></script>
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
angular.module('hello', [ 'ngRoute', 'ui.bootstrap', 'home', 'someroute', 'navigation' ])
.config(
function($routeProvider, $httpProvider) {
$routeProvider.when('/', {
templateUrl : 'home.html',
controller : 'home'
})
.when('/someroute', {
templateUrl : 'someroute.html',
controller : 'someroute'
}).otherwise('/');
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}
)
/* Styles go here */
angular.module('home', []).controller('home', function($scope, $http) {
});
<h1>Welcome</h1>
<div>
<p>This is the main page!</p>
</div>
angular.module('someroute', []).controller('someroute', function($scope, $http) {
});
<h1>Some Route</h1>
<div>
<p>You clicked on some route!</p>
</div>
angular.module('navigation', ['ngRoute']).controller('navigation', function($scope, $route, $http, $routeParams, $location) {
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
});
angular.module('route3', []).controller('route3', function($scope, $http) {
});
angular.module('route4', []).controller('route4', function($scope, $http) {
});
<h1>Route Three</h1>
<div>
<p>You clicked on route 3!</p>
</div>
<h1>Route Four</h1>
<div>
<p>You clicked on route 4!</p>
</div>