how to setup ui-router nested views

问题

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'
    });
});

回答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.

回答2:

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

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

回答3:

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

Use modals that can collabse and open when clicked like that of facebook here Modals for bootstrap
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

来源：https://stackoverflow.com/questions/33894734/how-to-setup-ui-router-nested-views

标签

angularjs

nested

angular-ui-router