<html ng-app="myApp">
<head>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.6/angular-route.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="controller.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#/">Home</a></li>
<li role="presentation"><a href="#/View1">View1</a></li>
<li role="presentation"><a href="#/View2">View2</a></li>
</ul>
<div ng-view=""></div>
</body>
</html>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
}).
when('/View1', {
templateUrl: 'view1.html',
controller: 'view1'
}).
when('/View2', {
templateUrl: 'view2.html',
controller: 'view1'
}).
otherwise({
redirectTo: '/'
});
}]);
/* Styles go here */
<h2>View 1</h2>
<p>The View 1 content goes here</p>
<h2>View 2</h2>
<p>The View 2 content goes here</p>