<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.2.4" data-semver="1.2.4" src="https://code.angularjs.org/1.2.4/angular.js"></script>
<script data-require="ui-router@0.0.2" data-semver="0.0.2" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
</body>
</html>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('contacts',{
templateUrl: 'contacts.html',
controller : function($scope){
$scope.contacts = ["Harsh","HDMehta"];
}
})
.state('contacts.list',{
templateUrl: 'contacts.list.html',
})
});
myapp.controller('MainCtrl',function($state){
$state.transitionTo('contacts.list');
})
/* Styles go here */
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="contact in contacts">
<a>{{contact}}</a>
</li>
</ul>