AngularJS UI-router Nested Views
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
<div ui-view></div>
JavaScript
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
$stateProvider
.state('main', {
resolve: {
resA: function() {
return {
'value': 'Hello !!'
};
}
},
controller: function($scope, resA) {
this.resA = resA.value;
},
controllerAs: 'main',
abstract: true,
url: '/main',
template: '<h1>{{main.resA}}</h1>' +
'<div ui-view></div>'
})
.state('main.one', {
url: '/one',
views: {
'@main': {
template: "Im View One {{$parent.resA}}",
controller: function($scope, resB) {
$scope.main.resA = resB.value;
}
}
},
resolve: {
resB: function(resA) {
return {
'value': resA.value + ' from One'
};
}
}
}).state('main.two', {
url: '/two',
views: {
'@main': {
template: '<div ui-view="sub1"></div>' +
'<div ui-view="sub2"></div>'
},
'[email protected]': {
template: "Am awesome"
},
'[email protected]': {
template: "Am awesome two/too"
}
},
resolve: {
resC: function(resA) {
return {
'value': resA.value + ' from Two'
};
}
},
controller: function($scope, resA, resC) {
$scope.resA = resC.value;
}
});
}
])
.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.go('main.two');
}]);