how to setup ui-router nested views

Question

I am trying to setup my app with ui-router. I am familiar with basic nested views but I am wanting to do something more complex. I have my basic setup for the main views. I would like to have a chat popup that has its own views that are independent from the main views. I want to be able to navigate the main views and not affect the states in the chat popup. So how is this done? Do i need to have a abstract state for the chat? and then have nested views from there?

here is a visual.

and here is a plunker

plunker

 $stateProvider
    .state('root', {
      abstract: true,
      views: {
        '@': {
            template: '<ui-view />',
            controller: 'RootCtrl',
            controllerAs: 'rootCtrl'
        },
        'header@': {
            templateUrl: 'header.html',
            controller: 'HeaderCtrl',
            controllerAs: 'headerCtrl'
        },
        'footer@': {
            templateUrl: 'footer.html',
            controller: 'FooterCtrl',
            controllerAs: 'footerCtrl'
            }
       }
    })
    .state('root.home',{
        parent:'root',
        url:'/home',
        templateUrl:'home.html',
        controller: 'HomeController',
        controllerAs:'homeCtrl'
    })
     .state('root.about',{
        parent:'root',
        url:'/about',
        templateUrl:'about.html'
    });
});

Answer 1

Create Chat service/function with controllers in different js files and inject to the index.html and script.js. use bootstrap collapsible modal for pop-up chats.

Looking @ your plunkr, you're on right track,though injecting controller from script.js via controllerAs is not scalable for larger app.

Instead you can create js files for each controller and service and separate partial views, just need to inject the services and controllers to index.html and mention partial views in stateprovider function.

Answer 2

I am not sure if You want to use route for the chat but there are two ways for you may be more

1. Use modals that can collabse and open when clicked like that of facebook here Modals for bootstrap

2. Use angulars ngHide ngShow

   For your navigation while using at sub elements on chat you can create one state for the chat and nest chat navigation in to you chat state so that any state change will not change your other chat states. That means you will need to use substate concepts of ui-router

Answer 3

I suggest that, don't use footer as a ui-view, because it is completely independent of your states.

Then how?

Make your footer part as a template and use ng-include to render your footer part.

<footer ng-include="'/footer.html'"></footer>

And within footer.html you can specifies the controller for the footer view.

Benefits

1. No need to handle footer on each state
2. No need to pass chat history on every change in state.