Использование маршрутизации AngularJS с одностраничным веб-приложением

Я читал об маршрутизации angularJS. Я хочу реализовать это в своем веб-приложении, но, к сожалению, сейчас у меня довольно сложная ситуация с переходом на маршрутизацию. Вот как сейчас работает мое приложение (и я знаю, что это, вероятно, не так, как должно, но оно работает):

У меня есть один контроллер для всего приложения. Представление состоит из нескольких разделов, одним из которых является раздел меню. Остальные - это "частичные" представления, как их называет angularjs, я думаю. Но проблема, которую я вижу здесь, заключается в том, что два моих частичных представления могут отображаться одновременно (страница построена таким образом, частичное представление занимает только часть страницы для себя).

Итак, что я делаю: я нажимаю кнопку в меню -> появляется одно частичное представление (ng-show), затем я могу щелкнуть что-то в этом частичном представлении, чтобы открыть второе частичное представление на той же странице (меню и первая часть должна оставаться такой, какая она есть).

На данный момент я включаю частичные части в некоторые div с помощью php include (что, я уверен, неправильно), и на div есть ng-show, так что в начале ничего не отображается. Затем я манипулирую всеми кликами в меню, устанавливая параметры ng-show для всех своих партиалов (представлений). Поэтому, если нажата одна кнопка, я скрываю все остальные (с помощью ng-click и функции внутри контроллера). Но это утомительная работа, а не способ angularJS, и поэтому я задаю этот вопрос здесь.

Пример моего включенного частичного (лишенного всех ненужных классов css и т. д.):

<div ng-show="showNames">
    <?php include_once("views/AREA1/names.php") ?>  
</div>

А в named.php, например, всего несколько элементов с ng-repeat и другими директивами angularJS… У меня много таких включений, и они очень хорошо работают только с манипуляциями с ng-show. Но теперь, когда я понял некоторые концепции AngularJS, я вижу, что допустил ошибку…

Подводя итог: как я могу использовать маршруты angularJS (возможно, с ng-view? - не обязательно) для отображения представлений в моем веб-приложении? (с учетом ситуации, которую я описал выше). Я просто хочу, чтобы пользователь мог знать, на какой «части страницы» он находится в любой момент.

EDIT: я просмотрел это и я думаю, что смогу это решить: мне нужна структура, подобная той, что в этом примере 2.1 Online Demo, но, кроме того, мне нужно иметь возможность щелкнуть что-то в ng-view, что должно откройте другой вид (первый должен оставаться на месте). Любая идея, как это сделать?


person trainoasis    schedule 13.02.2014    source источник


Ответы (2)


При использовании функции routing в AngularJS html-содержимое ng-view будет полностью заменено новым фрагментом. Вы не должны использовать ng-view для таких целей, как одновременное отображение нескольких частей.

Но вы можете подумать о смешивании ng-view и ng-include.

Скажем, мы щелкаем по каждому элементу в меню, ng-view изменяет суб-партиал, у вас может быть ng-include в ваших суб-партиалах, и мы можем все это здесь, как суб-суб-партиал.

Попробуйте прочитать ng-include.

person Howard    schedule 13.02.2014
comment
хм попробовал ng-include, но он создает новую $scope и, таким образом, создает больше проблем, чем кажется? - person trainoasis; 20.02.2014
comment
Извините, может быть поздно ответить вам. Вот демонстрация Plunker от меня, показывающая, как использовать ng-include для добавления подстраницы, plnkr .co/edit/bvr6764VR3Iq8AUO1Urh?p=info - person Howard; 25.02.2014
comment
И да, ng-include создаст новый scope. С какой проблемой вы столкнулись? Лучше дать plunker. Тогда мы могли бы решить проблему на основе реального случая. - person Howard; 26.02.2014

В AngularJS есть ng-view, который будет содержать основную тему текущего контекста, остальные элементы пользовательского интерфейса управляются ng-include. Маршруты также работают синхронно с nv-view.

Если ваши требования к представлению сложны, обратите внимание на компонент ui-router, который поддерживает различные комбинации.

person Chandermani    schedule 13.02.2014
comment
Хм, это выглядит довольно сложно. Ng-include создает новую $scope, и это меня немного беспокоит. Я до сих пор не знаю, как начать внедрять маршрутизацию в свое приложение. - person trainoasis; 20.02.2014
comment
Внутри вашего партиала, отображаемого в ng-view, вы всегда можете добавить раздел, который скрыт по умолчанию и отображается на основе клика. Для этого вы можете использовать ng-if или ng-show\hide. - person Chandermani; 21.02.2014
comment
Но тогда у меня нет настраиваемого URL-адреса для этих подстраниц, по которым щелкнули, которые я хотел бы иметь, если у меня будет маршрутизация. На данный момент у меня есть ng-show/hide для управления всей страницей, которая отлично работает - единственное, что я не могу перейти на определенную страницу с URL-адресом, а только нажав, чтобы попасть туда - person trainoasis; 21.02.2014
comment
Да, и именно поэтому я попросил вас заглянуть в ui-router. Еще один думаю, что я могу предложить использовать строку запроса с маршрутом для дополнительных представлений. В этом случае вы можете установить reloadOnSearch в коллекции маршрутов $routeProvider на false. Тогда произойдет то, что основной вид не будет заменен, и вы получите дополнительные параметры из URL-адреса. - person Chandermani; 21.02.2014
comment
Я бы не хотел использовать ui-router, так как предполагается, что он находится в тяжелой стадии разработки, а не для использования в производстве (к сожалению)… в любом случае, я вижу, что у меня здесь довольно сложная ситуация, эх. спасибо за ваши ответы, я постараюсь провести дополнительные исследования - person trainoasis; 21.02.2014