<!DOCTYPE html>
<html ng-app="MyRoute">
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<ul class="nav nav-pills">
<li role="presentation">
<a ui-sref="home" href="#/home">Home</a>
</li>
<li role="presentation">
<a ui-sref="link1" href="#/link1">Link1</a>
</li>
<li role="presentation">
<a ui-sref="link2" href="#/link2">Link2</a>
</li>
<li role="presentation">
<a ui-sref="link3" href="#/link3">Link3</a>
</li>
</ul>
</div>
<div class="container" ui-view>
</div>
</div>
<script data-require="angular.js@2.0.0-alpha.31" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
<script data-require="ui-router@0.2.15" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
angular.module("MyRoute",['ui.router']);
angular.module("MyRoute").config(function($stateProvider,$urlRouterProvider){
//DEFAULT URL
$urlRouterProvider.otherwise('/home');
$stateProvider.state("home",{
url:'/home',
controller:function($scope){
$scope.data={'title':'Home','body':'Home Page'};
},
templateUrl:'home.html'
}).state("link1",{
url:'/link1',
controller:function($scope){
$scope.data={'title':'Link1','body':'Link1 Page'};
},
templateUrl:'link1.html'
}).state("link2",{
url:'/link2',
controller:function($scope){
$scope.data={'title':'Link2','body':'Link2 Page'};
},
templateUrl:'link2.html'
}).state("link3",{
url:'/link3',
controller:function($scope){
$scope.data={'title':'Link3','body':'Link3 Page'};
},
templateUrl:'link3.html'
});
//what if user clicks the wrong url?
//TODO
//$rootScope.on($stateNotFound,function(event){$urlRouterProvider.otherwise('/notfound');});
});
/* Styles go here */
body { padding-top: 70px; }
<div class="panel panel-default">
<div class="panel-heading">{{data.title}}</div>
<div class="panel-body">{{data.body}}</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">{{data.title}}</div>
<div class="panel-body">{{data.body}}</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">{{data.title}}</div>
<div class="panel-body">{{data.body}}</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">{{data.title}}</div>
<div class="panel-body">{{data.body}}</div>
</div>
<h1>Oops!! page not found.</h1>