I am using the ui-router to manage a deeply nested routing setup which is composed of multiple frames within a page.
Something like this:
<html>
<body>
<div ui-view="foo"></div>
<div ui-view="bar"></div>
<div ui-view="baz"></div>
</body>
</html>
My routing file is something like this:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('alpha', {
url: '/alpha',
views: {
'foo': {templateUrl: '/partials/foo.html'},
'bar': {templateUrl: '/partials/bar.html'},
'baz': {templateUrl: '/partials/baz.html'},
},
})
.state('beta', {
url: '/beta',
views: {
'foo': {templateUrl: '/partials/foo.html'},
'bar': {templateUrl: '/partials/quz.html'},
'baz': {templateUrl: '/partials/qux.html'},
},
})
.state('gamma', {
url: '/gamma',
views: {
'foo': {templateUrl: '/partials/flarp.html'},
'bar': {templateUrl: '/partials/corge.html'},
'baz': {templateUrl: '/partials/qux.html'},
},
})
});
The page is made up of multiple panels and this setup is working fine. However each URL change forces all ui-views elements to reload - even if the URL is the same.
For example moving from /alpha to /beta will reload the <div ui-view="foo"></div> element even though the view URL is the same.
Does anyone have any idea on how I can stop the views reloading if the view URL is the same as previous?