Как сделать внутренний пользовательский интерфейс в угловом JS-маршрутизаторе с несколькими страницами

Question

У меня есть следующая страница:

  <div class="header"></div>
       <ui-view></ui-view>
  <div class="footer"></div>

, и моя конфигурация моей страницы:

 .state('reports', {
        url: "/",
        templateUrl: "src/r.php",
        controller: 'RController',
        controllerAs: 'R'
       })
       .state('data', {
             url: "/data/:dataID",
             templateUrl: "src/data.php",
             controller: 'DataController',
             controllerAs: 'vm',
        });

Теперь я хотел бы добавить еще одну страницу под названием "тест"., но на этой странице я хочу использовать внутренний интерфейс.так что страница будет выглядеть так:

<div class="testPage">
   <div ui-view="users"></ui-view>
   <div ui-view="another"></ui-view>
</div>

мой вопрос: как добавить ее в маршрут
Я попробовал следующее, но у меня пустое представление:

 .state('data', {
                url: "/data",
                templateUrl: "src/data.php",
               //controller: 'DataController', // i tried also with and without this
                //controllerAs: 'Data',// i tried also with and without this
                views: {
                     'users': {
                       templateUrl: 'src/data/users.php',
                       controller: 'UsersController',
                       controllerAs: 'vm',
                     }
              } 

Answer 1

Я думаю, что в объявлении состояния templateUrl должен ссылаться на страницу с представлением с именем 'users'

.state('data', {
                url: "/data",
                templateUrl: "src/data.php",
                views: {
                     'users': {
                       templateUrl: 'src/data/users.php', // This should be 'test' page or some other page with a view named 'users'
                       controller: 'UsersController',
                       controllerAs: 'vm',
                     }
              }