Angular-Ui-Router, nested named views - what am I doing wrong?

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.ne

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.