Сохранить состояние просмотра в URL-адресе с помощью Angularjs

Каков общий (если есть) консенсус в отношении сохранения состояний представления как части URL-адреса в Angularjs и как мне это сделать? У меня довольно сложный вид / маршрут с множеством фильтров, вкладок и т. Д., Которые приводят к состоянию просмотра.

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

Есть ли шаблон, который я могу использовать в качестве руководства? Кто-нибудь делал это раньше и может поделиться опытом? Следует ли мне воздерживаться от сохранения состояний представления в URL-адресе?


url javascript state angularjs angular-routing
person orange    schedule 16.11.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Если требуемые данные могут быть сериализованы в {key, value}, вы можете использовать $location.search(), чтобы сохранить и получить эту информацию в контроллерах:

app.controller("myCtrl", function ($scope, $location, $routeParams) {
    // Load State
    var savedState = $location.search();
    allProperties.forEach(function (k) {
        if (typeof savedState[k] !== 'undefined') {
            $scope.model[k] = savedState[k];
        } else {
            $scope.model[k] = defaultValues[k];
        }
    });

    // Save the parameters
    $scope.createUrlWithCurrentState = function() {
         allProperties.forEach(function (k) {
             $location.search(k, $scope.model[k]);
         });
    });
})

Теперь вы можете вызвать createUrlWithCurrentState с ng-change каждого элемента input, который имеет ng-model, и состояние будет сохраняться при каждом изменении, или вы можете вызвать эту функцию в ng-click с помощью кнопки Create a link to this page.

Однако вам нужно будет постоянно обновлять allProperties и defaultValues, чтобы сохранить все необходимые параметры.

Что касается того, следует делать это или нет, ответ зависит от вашего варианта использования. Если вам нужно разрешить совместное использование ссылок, то существует очень мало альтернатив сохранению состояния в URL-адресе.

Однако некоторое состояние может быть непросто сериализовать, или данные могут быть слишком длинными для сохранения в URL.

Если вы хотите сохранить полученную информацию только для текущего сеанса или браузера, вы можете посмотреть $cookieStore или API хранилища DOM .

person musically_ut    schedule 16.11.2013
comment
Спасибо за указатель location.search() и за упоминание ограничений длины URL. Было бы неплохо, если бы можно было как-то кодировать / сжимать состояние (пары ключ-значение), чтобы длина была ограничена ... - person orange; 17.11.2013
comment
Это зависит от вашего приложения и данных, которые вы хотите сохранить. Если доходит до дела, можно проявить творческий подход и начать сохранять его в base64 или даже gzip на лету в приложении, но я не думаю, что это дойдет легко. Я бы порекомендовал перейти этот мост, когда вы к нему подойдете. - person musically_ut; 17.11.2013
comment
... или другое сжатие (base64 и gzip, скорее всего, будут генерировать недопустимые символы URL). Но я последую вашей рекомендации и посмотрю, как далеко я продвинусь, не прибегая ни к чему слишком сложному. - person orange; 17.11.2013