AngularJS UI-Router multiple views - load only in a view

Question

In AngularJS, how to load only a particular named view? For example, in below code, if contact is selected, I like it to load only in bottomview and keeping rest of the views (say topview) as it is. Unfortunately, AngularJS is loading all the views. Any idea what am I doing wrong?

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('contact', {
    url: '/contact',
    views: {
        'bottomview': {templateUrl: 'contact.html'}
    }
})

Answer 1

Your idea is good, and could be achieved with state nesting:

.state('home', {
    url: '/home',
    views: {
        'topview': {templateUrl: 'top.html'},
        'bottomview': {templateUrl: 'bottom.html'}
    }
})

.state('home.contact', {
    url: '/contact',
    views: {
        'bottomview@': {templateUrl: 'contact.html'}
    }
})

So, 'contact' is now child state of 'home', and it means, that

• all views loaded by parent ('home')
• and not replaced by child ('contact')

are not reloaded when contact is selected.

Note, that in case, that we target bottomView of the index.html, we need to use view absolute naming - 'bottomview@', e.g. check more details here Angularjs ui-router not reaching child controller