Angular-UI-router 嵌套状态为父级的“无此类状态”

我在设置嵌套视图的状态时遇到了问题。

这是我的测试模板的相关部分，它正在加载到我的索引.html上的"主"ui视图中。

<div class="row-fluid">
<div class="col-lg-3">
    <ul class="nav nav-list">
        <li class="nav-header">Header 1</li>
        <li class="active"><a href="#/test/page1">Page 1</a></li>
        <li><a href="#/test/page2">Page 2</a></li>
        <li class="nav-header">Header 2</li>
        <li><a href="#/test/page3">Page 3</a></li>
    </ul>
</div>
<div class="col-lg-9">
    <div class="container" ui-view="testcontent"></div>
</div>

这是我的测试模块的 js。

angular.module( 'test', [
    'ui.state',
    'ui.bootstrap',
    'test.page1',
    'test.page2',
    'test.page3'
])
.config(function config( $stateProvider ) {
    $stateProvider.state( 'test', {
        url: '/test',
        templateUrl: 'test/test.tpl.html',
        views: {
            "main": {
                controller: 'TestCtrl',
                templateUrl: 'test/test.tpl.html'
            }
        },
        data:{ pageTitle: 'Test' }
    })
    .state( 'test.page1', {
        url: '/page1',
        views: {
            "testcontent@test": {
                controller: 'Test1Ctrl',
                templateUrl: 'test/page1/page1.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 1' }
    })
    .state( 'test.page2', {
        url: '/page2',
        views: {
            "testcontent@test": {
                controller: 'Test2Ctrl',
                templateUrl: 'test/page2/page2.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 2' }
    })
    //.state( 'test.page3', {
    //    url: '/page3',
    //    views: {
    //        "testcontent@test": {
    //            controller: 'Test3Ctrl',
    //            templateUrl: 'test/page3/page3.tpl.html'
    //        }
    //    },
    //    data:{ pageTitle: 'Test Page 3' }
    //})
    ;
}) // Module configuration
.controller( 'TestCtrl', function TestCtrl( $scope ) {
});

如果在父模块的配置中设置了状态的配置，则此方法可以正常工作。

我想做的是在模块的配置部分而不是父模块的配置部分中设置状态。

angular.module( 'test.page3', [
    'ui.state',
    'ui.bootstrap',
    'test'
])
.config(function config( $stateProvider ) {
    $stateProvider.state( 'test.page3', {
        url: '/page3',
        views: {
            "testcontent@test": {
                controller: 'Test3Ctrl',
                templateUrl: 'test/page3/page3.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 3' }
    });
}) // Module configuration
.controller( 'Test3Ctrl', function Test3Ctrl( $scope ) {
});

如果我尝试这样做，那么我对 AppCtrl toBeTruthy 的通用测试就会爆炸并显示错误"由于：没有这样的状态测试，无法实例化模块 test.page3"。

有没有办法做到这一点，或者我是否卡在测试模块中将所有 .state(( 调用链接在一起？