Angular-Ui-Router, nested named views - what am I

Question

I'm trying to implement a very simple example using nested named views using ui-router, and I can't get it to work. If anyone could look at this jsFiddle - http://jsfiddle.net/thardy/eD3MU/ - and tell me what I'm doing wrong, I'd greatly appreciate it.

The basic idea is this: - My index.html has a single ui-view - The template that gets plugged into that has two, named ui-views - I'm trying to setup the configuration to populate these two ui-views with templates and I can't get it to work

This is the core of the fiddle (angle brackets in template replaced with []):

        $stateProvider
            .state('test', {
                url: '/test',
                views: {
                    'main': {
                         template:  '[h1]Hello!!![/h1]' +
                                    '[div ui-view="view1"][/div]' +
                                    '[div ui-view="view2"][/div]'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });

I've tweaked it a alot for several hours now (trying absolute names, etc), and I'm about to go crazy. It looks good according to the documentation (at least to me), but there aren't any simple examples, and I must be missing something obvious.

Update By removing the url from test state and adding url: '' to the test.subs state, it works. But adding any url to test state causes it to fail again. In my real world scenario, none of these states are at the root, and having no url at all in the parent state causes things to not work well. It's like that state isn't activated or something. According to the docs, having url: '' in the sub should cause it to be activated along with it's parent state, but that's not what is happening.

Update - Solution For any who would like to see it - http://jsfiddle.net/thardy/eD3MU/

Answer 1

two issues in above code:

1. As kju suggested abstract: true,

   An abstract state will never be directly activated, but can provide inherited properties to its common children states.

2. add url: "" in test.sub state

   Using an empty url means that this child state will become active when its parent's url is navigated to.

3. Don't manual transition to "test"

See code below:

angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1': {
                        template: "Im View1"
                    },
                    'view2': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
//        $state.transitionTo('test');
    }]);

Answer 2

Add "abstract: true" to the "test" state. If you then transition to test.subs, you will see the subviews.