AngularJS UI router: How to configure nested named views?

Question

I have a configuration like below:

...
.state(\'profiles\', {
    abstract: true
    , url : \'/profiles\'
    , resolve: {...}    
    , views: {
      main         


        

Answer 1

The solution could be found here: View Names - Relative vs. Absolute Names. A cite:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item
...
(note: in our case it must be 'profiles').

The point is, that we can use the full (absolute) name of the view, being part of the current state definition:

$stateProvider
    .state('profiles', {
        url: '/profiles',
        views: {
            mainModule: {
                template: '
' +
                          '  
Main
' +
                          '  
' +
                          '
',
            },
            // here we do target the view just added above, as a 'mainModule'
            // as 

            'leftSidePaneModule@profiles': {
                template: '
' + 
                            '  
' + 
                            '  
' +
                            '
',
            },
            // and here we do target the sub view
            // but still part of the state 'profiles' defined in the above
            // view defintion 'leftSidePaneModule@profiles'
            'leftWidgetOne@profiles': {
                template: '
One',
            },
            'leftWidgetTwo@profiles': {
                template: '
Two',
            },
        }
    });

There is also plunker showing the above code in action