Введение

В этом блоге мы дадим вам краткое изложение того, как мы реализовали маршрутизацию в нашем инструменте управления одностраничными проектами — PineStem.

Маршрутизация – это процесс перемещения пользователя в нужное место на основе выполняемых им действий.
Сохранение истории переходов пользователя является серьезной проблемой при разработке одностраничного приложения (SPA).
Чтобы решить эту проблему , мы реализовали простое решение на основе стека, которое включает только отправку и извлечение объекта с требуемыми свойствами.

Демо

Вы можете найти пример кода и демонстрацию в плункере здесь — https://plnkr.co/OnBe1bc9Q7h1tYBK1pSY?p=info

Выполнение

Для PineStem мы использовали популярный плагин маршрутизации под названием AngularUI Router.
«Идея нашей реализации довольно проста. Мы сохраняем параметры, необходимые для возврата к определенному состоянию в объекте, и помещаем их в массив.

Маршрутизатор AngularUI предоставляет нам событие $stateChangeSuccess, которое запускается при каждом успешном изменении состояния. Мы храним информацию, необходимую для перехода к этому конкретному состоянию в этом событии, включая stateParams, URL-адрес, шаблон, который необходимо загрузить, и имя состояния. Всякий раз, когда пользователь пытается вернуться, нажав кнопку «Выход/Отмена» или кнопку «Назад» в браузере, мы извлекаем последний элемент из массива и используем его для изменения состояния. Таким образом, мы можем поддерживать стек для точного хранения истории навигации пользователя.

Типичным объектом, который мы сохраняем при каждом изменении состояния, может быть тот, который показан ниже:

В PineStem у нас есть два способа навигации. Один из них — через главное окно, а другой — через боковую панель, расположенную слева.

Скриншот приложения показан ниже.

Чтобы определить режим навигации пользователя, мы использовали два флага —

  1. isFromNavBar — для него установлено значение true, если пользователь перемещается по боковой панели.
  2. isCancelOrSave– для него устанавливается значение true, если пользователь переходит назад с помощью кнопки отмены/выхода в главном окне.

Используя вышеупомянутые флаги, мы отслеживаем путь пользователя и выполняем необходимое действие.

  • Когда пользователь перемещается по главному окну, мы сохраняем его историю навигации, помещая информацию о состоянии в массив.
  • Если пользователь пытается перейти через боковую панель (isFromNavBar это true), мы очищаем историю маршрутов.
  • Если пользователь нажимает кнопку выхода/отмены (isCancelOrSave равно true) любого объекта, мы выталкиваем последний элемент в routeHistory и перенаправляем пользователя в ранее посещенное состояние. Чтобы узнать больше о флаге isCancelOrSave, посетите раздел Обработка кнопки возврата или выхода.

Логическая разбивка

Давайте посмотрим на фактическую логику в деталях -

Ниже приведены шаги, которые выполняются, когда пользователь пытается перемещаться по трем модулям, а именно: module_one, module_two и module_three.

Шаг 1. Предположим, что массив пуст. Например: $routeHistory = [ ];

Шаг 2. Теперь, когда пользователь пытается открыть module_one, нет необходимости выполнять какие-либо действия, так как это его первый шаг.

Шаг 3. Из module_one пользователь открывает module_two. Затем мы помещаем объект (с подробностями, как обсуждалось выше) в массив. Таким образом, $routeHistory = [module_one_route]

Шаг 4. Затем из module_two пользователь пытается перейти к module_three. Теперь мы поместим объект, связанный с module_two, в массив. Итак, наш массив становится
$routeHistory = [module_one_route, module_two_route]

Шаг 5. Допустим, пользователь нажимает кнопку выхода/назад в браузере в module_three. Затем нам нужно проверить переменную $routeHistory, и если она не пуста, выскочит последняя запись. Мы используем этот объект для рендеринга последнего состояния.

Работа с кнопкой «Назад» или «Выход»

Мы можем найти кнопку выхода/отмены в различных разделах приложения. При нажатии на эту кнопку пользователь перенаправляется в ранее посещенное состояние. Как и ожидалось, срабатывает событие $stateChangeSuccess, и мы сохраняем последнее состояние, которое посетил пользователь. Навигация с помощью кнопки «Назад» в браузере также вызывает событие $stateChangeSuccess.

Сохранение состояния на возврате/выходе приводит к непрерывному циклу.

Рассмотрим пример. Предположим, что есть три страницы с именами A, B и C.

  1. Пользователь посещает страницу с именем page A. Со страницы A пользователь посещает страницу B, затем со страницы B на страницу C. К настоящему времени стек заполнен [pageA, pageB].
  2. Затем он/она пытается вернуться, нажав кнопку «Назад» в браузере. Как и ожидалось, они перенаправляются на страницу B, используя последнюю запись в стеке.
  3. Наряду с перенаправлением страница C сохраняется при успешном изменении состояния, что делает содержимое стека — [pageA, pageC].
  4. Затем, если пользователь попытается снова нажать кнопку «Назад», ожидая, что он окажется на странице A, вместо этого он будет перенаправлен на страницу C. Это происходит потому, что страница C является последним элементом в стеке.

То же самое показано на изображении ниже.

Чтобы пропустить сохранение последнего состояния, мы устанавливаем флаг isCancelOrSave в true. Всякий раз, когда пользователь нажимает кнопку «Выход/Отмена» или кнопку «Назад» в браузере, состояние isCancelOrSave устанавливается на true.

Затем в событии $state Change Success выполняется следующий фрагмент кода.

Нажмите здесь, чтобы узнать больше.

www.osmosys.asia