Angular ui-router: вложенные представления и множественные представления

ui-router - отличная альтернатива стандартным маршрутизаторам angular; он поддерживает вложенные состояния и представления и несколько просмотров.

Я немного смущен, хотя разница между ними. Мне кажется, что несколько представлений можно почти всегда мыслить и реализовывать как вложенные представления компонента "более высокого порядка". Например, если мы рассматриваем приложение с боковой панелью и полем содержимого, мы можем моделировать их как два "параллельных" представления или как сделать боковую панель родительским видом и панель содержимого ее вложенным дочерним представлением, которое зависит от выбранного элемента боковой панели.

Сам readme, похоже, предполагает, что разделение не очень четкое:

Pro Совет. Хотя несколько параллельных представлений являются мощной функцией, вы часто сможете более эффективно управлять своими интерфейсами, вставляя свои представления и сопоставляя эти представления с вложенными состояниями.

Когда я должен использовать несколько представлений и когда вложенные представления? Существуют ли какие-то критерии, которые могут помочь вам выбрать большую часть времени, что является правильным способом моделирования состояний, вложенных или нескольких?

Ответ 1

В моем понимании множественные представления в основном предназначены для макета, а вложенные представления для иерархических представлений parent-children. Используя случай, который вы упомянули в качестве примера:

Боковая панель и контент могут быть расположены как два разных вида:

$stateProvider.state('main', {
      abstract: true,
      url: '/main', //base url for the app
      views: {
         '': {
              //this serves as a main frame for the multiple views
              templateUrl: 'path/to/the/main/frame/template.html'
         },
         '[email protected]': {
             templateUrl: 'path/to/the/sidebar/template.html'
          },
        '[email protected]': {
             templateUrl: 'path/to/the/content/template.html'
         }
      }
});

Шаблон path/to/the/main/frame/template.html может содержать следующий фрейм:

<div class="row"> Header section </div>
<div class="row>
  <div class="col-sm-4"><div ui-view="sideBar"></div></div>
  <div class="col-sm-8"><div ui-view="content"></div></div>
</div>

Затем в sideBar или шаблонах контента вы можете вложить их дочерние элементы/частичные.

Ответ 2

Вложенные состояния могут использоваться как с вложенными, так и с параллельными представлениями.

Просто отметить что-то о вложенных состояниях.

Что делает вложенные состояния отличными, так это то, что вы можете легко делиться/наследовать данные от родительского к дочернему.

например:

Допустим, у вас есть несколько страниц, для которых пользователь вошел в систему.

$stateProvider
.state('admin', {
    url: '/admin'
    resolve: { authenticate: authenticate }
})
.state('admin.users', {
    url: '/users'
})

function authenticate(Auth) { 
    if (Auth.isLoggedIn()) {
        // Resolve the promise successfully
        return $q.when();
    } else {
        $timeout(function() {
            // This code runs after the authentication promise has been rejected.
            // Go to the log-in page
            $state.go('login', {}, {reload:true});
        });
        // Reject the authentication promise to prevent the state from loading

    return $q.reject();
}

Теперь каждое состояние, являющееся дочерним состоянием администратора, должно передать службу authenticate (даже если вы перейдете непосредственно к admin/users/).

Итак, в основном в решении вы можете поместить все, и все дочерние состояния наследуют от этого.

Что касается параллельных представлений, у вас есть полный контроль над вашими макетами.
@TonyGW пример отличный

Вы можете использовать их как в своем приложении одновременно, Я имею в виду вложенные состояния и параллельные представления, а также вы можете иметь параллельные вложенные представления. Это действительно зависит от структуры вашего макета макета.

Если вы хотите, чтобы дочерние состояния отображались внутри html родительского состояния, вам нужно использовать вложенные представления.