Angulaire: Insérer le premier enfant dans le parent (ui-view)

Question

J'essaie de placer le premier composant enfant dans le parent un, par ex. test1.html doit être à l'intérieur test.html. Voici le code 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' 
    }) 

Pour le moment, il suffit de charger la page principale test.html sans test1.html à l'intérieur.

Answer 1

Essayez ceci:

.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' 
     })