Angular: вставьте первого ребенка в родительский (ui-view)

Question

Я пытаюсь поместить первый дочерний компонент в родительский, например, test1.html должен быть внутри test.html, Вот HTML-код:

test.html:

<div ui-view></div>

test1.html:

<h1>First</h1>
<button>Go to second page</button> // This should render test2.html inside test.html

test2.html:

<h2>Second</h2>

test1.controller.js:

    .state('app.test', {
        url: '^/test',
        templateUrl: '/test/test.view.html',
        controller: 'TestController',
        controllerAs: 'testCtrl'
    })
    .state('app.test1', {
        url: '^/test1',
        templateUrl: '/test1/test1.view.html',
        controller: 'test1Controller',
        controllerAs: 'test1Ctrl'
    })
    .state('app.test2', {
        url: '^/test2',
        templateUrl: '/test2.view.html',
        controller: 'test2Controller',
        controllerAs: 'test1Ctrl'
    })

На данный момент это просто загрузка основного test.html страница без каких-либо test1.html внутри.

Answer 1

Попробуй это:

.state('app.test', {
            url: '^/test',
            templateUrl: '/test/test.view.html',
            controller: 'TestController',
            controllerAs: 'testCtrl'
        })
        .state('app.test.test1', {
            url: '/test1',
            templateUrl: '/test1/test1.view.html',
            controller: 'test1Controller',
            controllerAs: 'test1Ctrl'
        })
        .state('app.test.test2', {
            url: '/test2',
            templateUrl: '/test2.view.html',
            controller: 'test2Controller',
            controllerAs: 'test1Ctrl'
        })