Angular: как я могу использовать разные шаблоны для разных представлений?

У меня есть сайт AngularJS. Раньше index.html выглядел примерно так:

...
<div class="layout stuff headers whatever">My awesome header layout</div>
<div class="container" ng-view=""></div>
<div class="layout stuff footers whatever">My tubular footer layout</div>
...

Как правило, макет сайта определялся в элементах макета над и под представлением.

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

Думаю, я мог бы переместить заголовок для каждого макета в частичный, а нижний колонтитул для каждого макета — в частичный. Затем мне нужно было бы сделать ng-include в каждом представлении, например:

<div ng-include src="'partials/layout1-header.html'"></div>
... view content here ...
<div ng-include src="'partials/layout1-footer.html'"></div>

О, мой мизерам! Это уродливо и заставляет меня чувствовать, что мне нужен душ, чтобы вытереться.

Есть ли лучшее решение? Есть ли у angular способ справиться с этим, с которым я еще не сталкивался?

Примечание. Меня не особенно интересует использование angular-ui-route... но я хочу, чтобы меня убедили.


layout angularjs angularjs-routing
person Sir Robert    schedule 31.10.2013    source источник
comment
можно использовать $routeProvider без использования angular-ui-router ..будет намного проще, чем то, что вы пытаетесь. Пройдите учебник на сайте документации. Также обратите внимание на ng-view в документах   -  person charlietfl    schedule 31.10.2013
comment
Хрм. Я уже использую $routeProvider для основной маршрутизации. У меня есть хороший набор представлений и контроллеров. Я пытаюсь понять, как изменить шаблон макета, который находится вне представлений. Я перечитаю информацию о просмотре, чтобы увидеть, не пропустил ли я что-то...   -  person Sir Robert    schedule 31.10.2013
comment
думаю, я не слежу за проблемой... возможно, вам просто нужно обернуть включения в директивы... Демонстрация поможет лучше понять   -  person charlietfl    schedule 31.10.2013
comment
Хорошо, похоже, что angular-ui-router — это предписанное решение этой проблемы. Я постараюсь заставить его работать, а затем ответить на этот вопрос, если смогу =)   -  person Sir Robert    schedule 31.10.2013
comment
Привет, у меня тоже было такое же требование, и я выбрал пользовательский интерфейс, который решил мою проблему, поскольку я мог использовать несколько шаблонов. Так почему бы не использовать ui-route?   -  person kds    schedule 01.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

Итак, похоже, что лучший подход — использовать ui-router.

Для чего это стоит:

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

  • информация
  • панель управления
  • поиск

Далее предположим, что каждый из этих макетов имеет разные представления, например:

  • панель инструментов/аккаунт/обзор
  • панель/аккаунт/настройки
  • информационная панель/отчеты
  • панель инструментов/отчеты/резюме
  • ... и так далее ...

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

./partials/dashboard.html
./partials/dashboard/account/overview.html
./partials/dashboard/account/settings.html

Вам нужно настроить ui-router следующим образом:

$stateProvider
  .state("dashboard", {
    url: "/dashboard",
    templateUrl: "partials/dashboard.html"
  })
  .state("dashboard.account", {
    url: "/account", // notice this chains from "/dashboard" implicitly
    template: "<div ui-view></div>" // we don't need a file for this pass-through
  })
  .state("dashboard.account.overview", {
    url: "/overview",
    templateUrl: "partials/dashboard/account/overview",
    controller: "DashboardAccountOverviewCtrl"
  })

и так далее. Контроллеры могут быть указаны так, как вы ожидаете (см. dashboard.account.overview).

Это позволяет вам указать, какие макеты следует использовать на уровне «панели инструментов» или «информации» и т. д., и использовать различные «внутренние» шаблоны для других вещей (это то, что ui-view означает «вложенные представления»).

ХТН.

person Sir Robert    schedule 01.11.2013