AngularJS с ui-router и вложенными шаблонами

У меня есть AngularJS с angular-ui-router, чтобы иметь больше контроля над моими шаблонами. У меня есть два URL-адресаAngularJS с ui-router и вложенными шаблонами

«/ график»
«/ логин»

Моя идея заключается в том, чтобы загрузить родительское состояние, которое имеет как HTML для 1 и 2 и нескольких партиалов.

У меня есть index.html, который загружает мой частичный вид под названием «содержание»:

<!doctype html> 
<html lang="en" ng-app="myApp" id="ng-app"> 
    <body ng-controller="Login" class="auth-switch"> 
    <div class="body_wrap" ui-view="content"></div> 
    </body> 
</html>

Это то, что мое частичное «содержание» выглядит следующим образом:

<div ui-view="header"> 
    <div ui-view="profile"></div> 
    <div ui-view="messages" id="messages"></div> 
</div> 
<div ui-view="timeline"></div> 
<div ui-view="login" ng-controller="Login"></div> 
<div ui-view="footer"></div>

Я пытаюсь создать структуру здесь и хотите загрузить эти шаблоны. Это то, что я пытаюсь сделать в моем app.js:

// Now set up the states 
    $stateProvider 
    .state('content', { 
     abstract: true, 
     views: { 
     "content": { templateUrl: "partials/content.html" } 
     }, 
     access: access.public 
    }) 
    .state('content.login', { 
     url: "/login", 
     views: { 
     "messages": { templateUrl: "partials/messages.html" }, 
     "header": { templateUrl: "partials/header.html" }, 
     "login": { templateUrl: "partials/login.html" }, 
     "footer": { templateUrl: "partials/footer.html" } 
     }, 
     controller: 'Login', 
     access: access.public 
    }) 
    .state('content.timeline', { 
     url: "/timeline", 
     views: { 
     "messages": { templateUrl: "partials/messages.html" }, 
     "header": { templateUrl: "partials/header.html" }, 
     "timeline": { templateUrl: "partials/timeline.html" }, 
     "login": { templateUrl: "partials/login.html" }, 
     "footer": { templateUrl: "partials/footer.html" } 
     }, 
     access: access.user 
    })

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

Нужно ли мне состояние для каждого частичного шаблона вместо использования «просмотров»?
Как я могу загрузить шаблоны «сообщения» и «профиль» в шаблоне «header»?
Мне нужно только два URL-адреса, хорошо ли использовать два состояния в этом случае?

источник

2013-12-05 Daan

Даан,

Say в одном из своих маршрутов, 'content.login', являются все мнения ('сообщения', 'заголовок', 'Войти', 'колонтитул'), пострадавших от «Логин 'контроллер. Да, тогда это хорошо, но если его нет, тогда вы не должны иметь эти представления в конфигурации маршрутизатора. Вместо этого вы должны добавить его в частичный вид содержимого.

Нужно ли мне состояние для каждого частичного шаблона вместо использования «просмотров»?

Короткий ответ № Может быть, вы должны четко понимать, что такое частичное. Частично это похоже на определение части вашей страницы, которая имеет собственный вид, контроллер и модель. Вы можете решить сделать так много частичных частей, которые вы хотите. Но это зависит от того, насколько сложным является ваше веб-приложение. Если вы хотите иметь более одного шаблона (.html) вложенных шаблонов и решили иметь только один JS-файл (для контроллеров шаблонов), который является совершенно точным. Но если вы чувствуете, что у каждого шаблона больше функциональности, тогда вы вставляете частичные.

Как я могу загрузить «сообщения» и «Профиль» шаблоны в «Заголовок» шаблон?

Гнездо Partials

Мне нужно только два URL, это хорошо, чтобы использовать два состояния в этом случае?

Если его 'URL/Логин' и 'URL/график' только вы будете нуждаться в двух состояниях. Но если у вас есть «url/timeline/abc» или «url/abc», вам понадобится другое новое состояние для каждого из них.

Если вы думаете, что его очень неаккуратно попытка использования «объектов» для государства вместо того, чтобы эти грязных конфигурации(). - https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

источник

2013-12-09 21:59:11 kapalani

Я понимаю ответ 1 и 3 ясно, спасибо. Но для ответа 2 мой вопрос по-прежнему остается, если я хочу иметь только 2 состояния (временная шкала, логин), как мне определить более глубокие вложенные .html-файлы (например, «header»> «profile») и как я могу всегда включать «header» (indepedent timeline/login) .html-файл (путь ui-router)? Не могли бы вы привести пример? – Daan

Меня смущает «независимость от временной шкалы/входа» и «ui-router way». Это то, что header.html, profile.html и messages.html загружают контент на основе, если он находится в url/login или url/timeline? – kapalani

Файлы header.html и messages.html всегда должны быть загружены, так как они должны использоваться каждым контроллером. Файл profile.html должен загружаться только тогда, когда мы находимся в контроллере временной шкалы. Итак, в основном, как настроить мой контроллер с состояниями в этом случае – Daan

AngularJS с ui-router и вложенными шаблонами

ответ

Смежные вопросы