<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.11" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
<script data-require="angular-ui-router@*" data-semver="0.2.7" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="list.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Top <small>URL:{{$location.url() || '/'}}</small> </h1>
<div class="box">
<div ui-view="" autoscroll="false"></div>
</div>
</body>
</html>
var app = angular.module('app',['ui.router','ListCtrl'],['$stateProvider', '$urlRouterProvider',
function($stateProvider,$urlRouterProvider)
{
$urlRouterProvider.otherwise('/emp');
$stateProvider
.state('emp',{
url:"/emp"
,templateUrl:"list.html"
,controller:"ListCtrl"
})
.state('emp.detail',{
url:"/detail/{empID:[0-9]{5}}"
,templateUrl:"detail.html"
,controller:function($stateParams,$scope){
$scope.params = $stateParams;
}
})
.state('emp.detail.pictures',{
url:"/pictures"
,views:{
"@":{
templateUrl:"pictures.html"
,controller:function($stateParams,$scope){
$scope.params = $stateParams;
}
}
}
});
}]);
app.run(function($rootScope, $location) {
$rootScope.$location = $location;
});
/* Styles go here */
.box
{
border:solid #CCC 1px;
padding:1em;
}
.img
{
display:inline-block;
width:100px;
height:100px;
background-color:#EEE;
margin:4px;
border:solid #CCC 1px;
}
<h2>List View</h2>
<div class="list-group">
<a ui-sref-active="active" class="list-group-item" ng-repeat="e in emps" ui-sref=".detail({empID:e.id})">{{e.name}}</a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>Detail View</h2>
<div class="box">
<div ui-view autoscroll="false"></div>
</div>
angular.module('ListCtrl',[]).controller('ListCtrl',function($scope,$state){
$scope.url = $state;
$scope.emps = [
{id:"00001",name:"A"}
,{id:"00002",name:"B"}
,{id:"00003",name:"C"}
,{id:"00004",name:"D"}
];
});
<h3>Detail Page</h3>
ID:{{params.empID}}
<div>
<a ui-sref=".pictures({id:params.empID})">All pictures</a>
</div>
<h2>{{params.empID}} - Pictures</h2>
<div><a ui-sref="^")>Back to detail</a></div>
<div class="img"></div><div class="img"></div><div class="img"></div>
<div class="img"></div><div class="img"></div><div class="img"></div>
<div class="img"></div><div class="img"></div><div class="img"></div>