Вложенные ng-представления в angular js

У меня было два разных приложения в angular. Во время интеграции в одно приложение мне приходилось

nest ng-views.

Для образца (index.html) есть

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

Одно из моих приложений app (view2.html)

<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}

Теперь это приложение имеет разные представления еще раз внутри него.

Я пробовал, но страница не загружается. Есть ли возможность вложить ng-views?

Если это невозможно, это можно объяснить

Заранее спасибо

Ответы

Ответ 1

Обновленный ответ:

UI Router (который теперь находится здесь: https://angular-ui.github.io/ui-router/site/#/api/ui.router) обычно считается лучшим решением для сложной маршрутизации в AngularJS.

Оригинальный ответ:

В настоящее время в AngularJS вложенные представления не являются возможными. В моем последнем приложении я использовал решение, полученное здесь: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Позволяет мне эффективно отображать представления (и вообще пропускать ограниченный просмотр)

После этого появилось другое (более простое, лучшее, верю) решение:

http://angular-ui.github.com/ (прокрутите вниз до "Проверка маршрута" )

Проверьте это!

Ответ 2

Я бы посоветовал вам взглянуть на проект ui-router команды AngularUI. Этот проект содержит новый маршрутизатор на основе состояний, который также может реагировать на URL-адреса, но позволяет лучше управлять состоянием приложения.

Это включает использование нескольких и/или вложенных представлений.

У меня был аналогичный вопрос некоторое время назад, поэтому, возможно, его ответы также помогут вам: Как настроить вложенные представления в AngularJS?

Кроме того, вы можете ожидать, что ui-router будет интегрирован в AngularJS в будущую версию, так что это, скорее всего, будет способом маршрутизации в будущем. Поэтому нет необходимости придерживаться других обходных решений, если вы уже можете иметь то, что будет следующим сегодня: -)

Ответ 4

Существует множество сторонних библиотек для вложенных представлений и маршрутизации. ui-router уже упоминалось здесь, я также хотел бы взглянуть на это:

http://angular-route-segment.com

Он обладает возможностями вложенных представлений, которые вы просите точно, и его гораздо проще использовать, чем ui-router. В вашем примере:

index.html

<div app-view-segment="0"></div>

view1.html

<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>

глубоководного view.html

<p>This is the partial for view inside view1.</p>

Ответ 5

Если вы не хотите обращаться к еще одной библиотеке, чтобы решить вашу проблему (не что-то в этом плохого), вы также должны изучить директивы и ng-switch и ng-show.

Этот подход был дан здесь как ответ:

angular сложная вложенность частичных файлов

Ответ 6

Я искренне сомневаюсь, что это идиоматический Angular (и упоминалось выше, что возможны проблемы с перекрестным браузером), но мое решение ng-include для представления "все" с моими другими представлениями, вложенными внутри чего-то вроде all.html:

    <div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
    </div>

    <div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
    </div>

    <div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
    </div>

Это работало для меня, но казалось, что это идет вразрез с каркасом. Я лично буду пытаться что-то похожее на то, что Eamon связывается с моим следующим проходом.