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

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

введите описание изображения здесь

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

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

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

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

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

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

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

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

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

 $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 в разных не вложенных местах на вашем сайте. В этом случае вы не можете ожидать доступа к переменным области представлений родительского состояния в представлениях дочерних состояний.

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

Я просто хочу поделиться своим опытом. Там есть

  • аналогичные вопросы и ответы: Угловой UI-маршрутизатор – Вложенные состояния с несколькими макетами
  • и ссылка на рабочий плункер

Фрагмент состояния 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' }, } 

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

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

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

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

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

 $stateProvider .state('root', { abstract: true, template: '
', 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 я вижу в мультивизах, просмотр вложенности, наследование областей и логический автомат

  • Угловой UI-маршрутизатор Как создать «макет»?
  • Угловой - ui-router получает предыдущее состояние
  • Как отправлять и извлекать параметры с помощью $ state.go toParams и $ stateParams?
  • Использование ui-router с Bootstrap-ui modal
  • Разница между ui-sref и $ state.go в UL-маршрутизаторе AngularJS
  • Угловой UI-маршрутизатор Вложенное разрешение штата в дочерних штатах
  • путь динамического шаблона ui-router
  • angularjs ui-router странное поведение с дополнительным сегментом в маршруте
  • Угловой и UI-маршрутизатор, как установить динамический шаблонUrl
  • Давайте будем гением компьютера.