ui-route how to render multi ui-view when route to template

Question

my requirement is:

index.html  
   -- /login  
   -- /main/tab1
   -- /main/tab2
   -- /userinfo

And the ui will be like:

• header: logo, userinfo
• left-nav: switch tab1/tab2/tabN
• right content: ui-view to change, and multi sub ui-view,

And UI detail:

• login will be a independent page, no header, left-nav, right content
• main/tab will only change the right content
• /userinfo will replace the left-nav and right content to some userinfo page, remain the header, of course using ui-view

I've seen the ui-route demo, but follow the demo, I don't know how to build the route config to what I want, so could any one help me ? The ui-route config is a little complex.....
If my url define is not perfect, please help me improve the url structure, thanks

Answer 1

If you have seen the demo and understood it, this should make sense:

.state('index', {
    url: '/',
    templateUrl: //your index.html template path,
    controller: // your controller if any for index page
  })

  .state('index.login', {
      url: '/login',
      templateUrl: // your login template,
      controller: // controller for login page
  })

    .state('index.mainTab1', {
        url: '/main/tab1',
        templateUrl: // your tab1 template,
    })

add the other states in the same manner and you should be ready to go.