2015-07-09 1 views
1

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

Ниже вы можете увидеть черновик эшафот моего приложения: application scaffold

Так что я пытаюсь сделать, это создать приложение на одной странице для всего моего приложения.

В пределах <menu bar> можно выбрать различные страницы для отображения в рабочей области. Я узнал, что могу реализовать это поведение, используя директиву <ng-view>.

Однако то, что я хочу сделать это, в зависимости от кнопок щелкнул в в <workspace> (-> текущий загруженный вид) Я хотел бы, чтобы показать разные <sidebars>.

Например: если щелкнуть по кнопке edit object в рабочей области, форма для редактирования объекта будет загружена в боковую панель.

Сначала я мог решить это, используя несколько директив ng-view в приложении, но я узнал, что это невозможно.

Итак, есть ли у вас какие-либо идеи о том, как реализовать описанное выше поведение? Я хотел бы асинхронно загружать <sidebar> templates всякий раз, когда они необходимы в приложении. Эти шаблоны боковой панели должны содержать некоторую логику, например. кнопки для отправки данных и т. д.

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

Любые идеи, статьи, примеры очень рекомендуются! Благодарю.

Edit: Я создал небольшой и только проект сведена на как я себе AngularJS бы управлять процессом: enter image description here

ответ

1

Вы можете использовать угловую-интерфейс.

UI-Router имеет гораздо более мощные функции маршрутизации, чем маршрутизатор AngularJS по умолчанию.

Для просмотра с помощью Angular-UI вы можете иметь несколько видов в одном документе (ui-view), и каждый может загружать другой шаблон в зависимости от текущего состояния приложения (URL).

Вот документация для этих компонентов:

Вы определенно должны проверить это!

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