Вложенные состояния или представления для макета с помощью leftbar в ui-router?

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

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

Я думаю, что здесь есть два варианта: вложенные состояния (sidenav > Headerbar > Content) или с представлениями (если я это правильно понимаю). Я все еще изо всех сил пытаюсь заставить свою голову обернуться вокруг ui-router, независимо от того, сколько видео и статей я прочитал.

Нажав на Sidenav, вы загрузите состояние (или представление) в Content и Headerbar, чтобы настроить его содержимое на основе того, что загружено в Content.

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

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

И, конечно, ng-include и директивы могли бы сыграть в это.

Будучи новичком в ui-router, кто-то может ударить меня в правильном направлении? Где я застрял, загружает домашний вид. Я хочу, чтобы мои пользователи увидели свою панель управления в разделе "Содержимое" после входа в систему. И затем, как мне загружать новые элементы в Контент, когда пользователь переходит с боковой панели?

Ответ 1

Один способ разработки сценария с 1) боковым баром, 2) секцией действия и 3) основная область может быть как этот рабочий пример

Во-первых, состояние root. Вот состояние root с именем index. Он абстрактный и может сделать для нас resolve. Он не влияет на имена дочерних состояний и не расширяет URL (потому что это undefined)

$stateProvider
    .state('index', {
        abstract: true,
        //url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          '[email protected]' : { templateUrl: 'tpl.top.html',},
          '[email protected]' : { templateUrl: 'tpl.left.html',},
          '[email protected]' : { templateUrl: 'tpl.main.html',},
        },
      })

Первое реальное состояние - это список и наследуется от родителя, но с атрибутом parent: 'index', поэтому родительское имя не влияет на имя состояния.

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

    .state('list', {
        parent: 'index',
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })

Это реальная сила UI-Router, потому что теперь мы можем видеть, что ребенок вводит материал в два места - 1) секцию действия и 2) основную область

    .state('list.detail', {
        url: '/:id',
        views: {
          '[email protected]' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
          '[email protected]' : {
            templateUrl: 'actions.html',
            controller: 'ActionCtrl'
          },
        },
      })

Таким образом, мы можем использовать именованные виды и множественные представления в реальном мире. Пожалуйста, никогда не забывайте, как идет определение области:

Наследование наследования только по иерархии представлений

Имейте в виду, что свойства области только наследуют цепочку состояний, если представления ваших состояний вложены. Наследование свойств области не имеет ничего общего с вложением ваших состояний и всего, что связано с вложением ваших представлений (шаблонов).

Вполне возможно, что у вас есть вложенные состояния, шаблоны которых заполняют u-views в разных не-вложенных местах на вашем сайте. В этом случае вы не можете ожидать доступа к переменным области представлений родительского состояния в представлениях дочерних состояний.

Проверьте, что все в действии здесь

Ответ 2

Я просто хотел бы поделиться своим опытом. Существует

аналогичные Q и A: Angular UI Router - вложенные состояния с несколькими макетами
и ссылку на рабочий плункер

Фрагмент состояния def:

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          '[email protected]' : { templateUrl: 'tpl.top.html',},
          '[email protected]' : { templateUrl: 'tpl.left.html',},
          '[email protected]' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          '[email protected]' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        }

Вкратце, я использую подход вложенности.

Он похож на "основной пример", доступный здесь http://angular-ui.github.io/ui-router/sample/#/. Он иерархический (список сущностей/детали)

И что еще, я использую скрытое состояние корня удержания:

проверьте подробности здесь Обновление разрешенных объектов в родительских состояниях ui.router
ссылка на ссылку

который обрабатывает связанные с безопасностью вещи - один раз и распределяется между всеми дочерними состояниями:

$stateProvider
  .state('root', {
    abstract: true,
    template: '<div ui-view></div>',
    resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
    controller: 'rootController',
  })
  .state('home', {
    parent: "root",
    url: '/home',
    templateUrl: 'tpl.example.html',
  })
  .state('search', {
    parent: "root",
    url: '/search',
    templateUrl: 'tpl.example.html',
  })

Надеюсь, что это немного просветит, потому что мощь UI-Router я вижу в мультивизах, просмотр вложенности, наследование областей и логический конечный автомат за