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

Abhilash Augustine · Accepted Answer · 2015-12-07 03:55:52Z

4

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.

edited Dec 7, 2015 at 3:55

answered Dec 3, 2015 at 11:41

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robus · Accepted Answer · 2015-11-30 13:57:42Z

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.

Dagm Fekadu · Accepted Answer · 2015-12-04 14:10:15Z

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

Collectives™ on Stack Overflow

how to setup ui-router nested views

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related