AngularJS: запоминание состояния/настройки сложных представлений с маршрутами

Есть ли в одностраничном приложении способ переключаться туда и обратно на маршрут AngularJS и отображать его обратно в том же состоянии, что и раньше?

Обычно это реализуется путем привязки данных в родительской области. Хотя это легко настроить для облегченного представления, это может быть громоздко, если делать это для представлений, содержащих много графических элементов.

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

  • вы стоите на пункте 1 и выбираете вкладку 2
  • затем перейдите к пункту 2
  • наконец, переключитесь обратно на пункт 1: вкладка 2 больше не выбрана :-(

http://angular-route-segment.com/src/example/#/section1/1< /а>

Кажется, что представления разрушаются/создаются при переключении туда и обратно между маршрутами.

Решением было бы сохранение состояния пользовательского интерфейса в родительской области, но оно имеет следующие подводные камни:

  • создание объекта, хранящего все мелкие детали пользовательского интерфейса
  • создание сложной логики о сохранении и сбросе пользовательского интерфейса в том же состоянии, что и раньше
  • сохранение состояния пользовательского интерфейса в модели данных не звучит так, как MVC

Использование show/hide div, сохраняющего представления, сохраняет состояние, но тогда маршрут не используется, и процесс переключения должен быть реализован вручную. Мне нравится использовать маршруты, потому что 1. из навигации по истории браузера (хэш в URL-адресе) и 2. его легко настроить.

Отсутствие запоминания состояния пользовательского интерфейса похоже на то, что Chrome перезагружает страницы при переключении между вкладками: не очень удобно для пользователя.

Есть ли угловой путь?


person Derek    schedule 21.10.2013    source источник


Ответы (1)


Ваш подход $routeSegment очень интересен. Служба $routeSegment может подключаться к событию $routeChangeStart, чтобы

  • Каким-то образом сохраните «историю подпутей» для всех путей, которые вы видели до сих пор, возможно, только для тех, которые явно настроены на сохранение состояния своего пользовательского интерфейса. В вашем примере для пути "/section1/1" сохраненный дополнительный путь будет "/Y", если выбрана вкладка 2. Все становится интереснее, так как также может потребоваться охватить динамические пути с $routeParams.
  • Используйте эту историю для перенаправления с помощью $location.path в обработчике событий. Таким образом, событие $routeChangeStart со значением next.originalPath "/section1/1" может быть перенаправлено на "/section/1/Y"
person Hagen    schedule 11.02.2014