var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched URL redirect to dashboard URL
$urlRouterProvider.otherwise("/index");
// Views targeting:
// # relatively
// - my-view : relatively target 'my-view' in parent state.
// - "" : relatively targets the unnamed view in parent state.
// # absolutely views
// - my-view@ : absolutely target 'my-view' in root.
// - my-view@my-state : absolutely target 'my-view' in my-state's view.
// - @my-state: absolutely target unnamed view in my-state's view.
// - @: absolutely targets the unnamed view in root unnamed state.
// Recommended, use always views and states names (only root is unnamed):
// # relatively
// - my-view : relatively target 'my-view' in parent state.
// # absolutely views
// - my-view@my-state : absolutely target 'my-view' in my-state's view.
// - my-view@ : absolutely target 'my-view' in root.
$stateProvider
// index
.state('index', {
url: "/index",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"home.html"
},
'left-view@index' :{
templateUrl:"departures.html"
},
'right-view@index' :{
templateUrl:"arrivals.html"
},
'status-view': {
template:"<p>index<p>"
},
},
})
// departures
.state('departures', {
url: "/departures",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"departures.html"
},
'status-view': {
template:"<p>departures<p>"
},
},
})
// departures, add substate
.state('departures.add', {
url: "/add",
views: {
'bottom-view@departures': {
templateUrl:"departures.add.html"
},
'status-view@': {
template:"<p>departures.add<p>"
},
},
})
// departures, list substate
.state('departures.list', {
url: "/list",
views: {
'bottom-view@departures': {
templateUrl:"departures.list.html"
},
'status-view@': {
template:"<p>departures.list<p>"
},
},
})
// arrivals
.state('arrivals', {
url: "/arrivals",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"arrivals.html"
},
'status-view': {
template:"<p>arrivals<p>"
},
},
})
// arrivals, add substate
.state('arrivals.add', {
url: "/add",
views: {
'bottom-view@arrivals': {
templateUrl:"arrivals.add.html"
},
'status-view@': {
template:"<p>arrivals.add<p>"
},
},
})
// arrivals, list substate
.state('arrivals.list', {
url: "/list",
views: {
'bottom-view@arrivals': {
templateUrl:"arrivals.list.html"
},
'status-view@': {
template:"<p>arrivals.list<p>"
},
},
})
});
.container {
background-color: #f1f1f1;
}
<html>
<head>
<meta charset="utf-8">
<title>AngularJS - Nested views</title>
<!--Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!--JAquery-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!--Angular JS-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<!--Angular JS - UI Router-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!--Angular JS - Bootstrap-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<!--Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script></head><bodyng-app="app">
<!--Angular view injection-->
<div class="container">
<div class="row">
<div ui-view="menu-view" class="col-md-2"></div>
<div ui-view="container-view" class="col-md-10"></div>
</div>
<div class="pull-right">
<div style="width: auto; float:left; margin-right:10px">status:</div>
<strong style="width: auto; float:left;" ui-view="status-view"> </strong>
</div>
</div>
<!--
########################
### Partial views ##
######################## -->
<!-- menu -->
<script id="menu.html" type="text/ng-template">
<div class="alert alert-info">
<h3><a ui-sref="index">home</a></h3>
<h3><a ui-sref="departures">departures</a></h3>
<h3><a ui-sref="arrivals">arrivals</a></h3>
</div>
</script>
<!-- home -->
<script id="home.html" type="text/ng-template">
<h3>home</h3>
<div ui-view="left-view" class="col-md-6"></div>
<div ui-view="right-view" class="col-md-6"></div>
</script>
<!-- departures -->
<script id="departures.html" type="text/ng-template">
<div class="alert alert-warning">
<strong>departures</strong>
<h5><a ui-sref="departures.add">add new</a></h5>
<h5><a ui-sref="departures.list">view list</a></h5>
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</script>
<!-- add departures -->
<script id="departures.add.html" type="text/ng-template">
create new departure<input type=text/>
</script>
<!-- list departures -->
<script id="departures.list.html" type="text/ng-template">
<ul>
<li>departure 1</li>
<li>departure 2</li>
<li>departure 3</li>
</ul>
</script>
<!-- arrivals -->
<script id="arrivals.html" type="text/ng-template">
<div class="alert alert-success">
<strong>arrivals</strong>
<h5><a ui-sref="arrivals.add">add new</a></h5>
<h5><a ui-sref="arrivals.list">view list</a></h5>
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</script>
<!-- add arrival -->
<script id="arrivals.add.html" type="text/ng-template">
create new arrival<input type=text/>
</script>
<!-- list arrivals -->
<script id="arrivals.list.html" type="text/ng-template">
<ul>
<li>arrival 1</li>
<li>arrival 2</li>
<li>arrival 3</li>
</ul>
</script>
</body>
</html>
