<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://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<ul class="nav nav-pills">
<li><a ui-sref="view1">View1</a></li>
<li><a ui-sref="view2">View2</a></li>
</ul>
<div ui-view></div>
</body>
</html>
// Code goes here
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/view1");
//
// Now set up the states
$stateProvider
.state('view1', {
url: "/view1",
templateUrl: "view1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'testcontroller'
})
.state('view2', {
url: "/view2",
templateUrl: "view2.html"
});
});
/* 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>
<!-- view1.html -->
<h2>View 1</h2>
<p>The View 1 content goes here</p>
<!-- view2.html -->
<h2>View 2</h2>
<p>The View 2 content goes here</p>