使用 Angularjs 在 URL 中存储视图状态 [英] Store view state in URL using Angularjs

问题描述

关于在 Angularjs 中将视图状态存储为 URL 的一部分的一般(如果有的话)共识是什么，我将如何去做?我有一个相当复杂的视图/路由，其中​​包含许多要设置的过滤器、选项卡等，从而导致视图状态.

What's the general (if there is any) consensus on storing view states as part of the URL in Angularjs and how would I go about doing it? I have a fairly complex view/route with many filters to set, tabs, etc which result in a view state.

我看到了将所有这些视图组件的状态作为 URL 的一部分存储在应用程序中更简单的导航中的优势(导航 back 将在不加载来自服务器的状态，这将是另一种选择).另一个优点是视图状态可以添加书签.

I see the advantage for storing the state of all these view components as part of the URL in an easier navigation within the application (navigating back would restore the previous view with all selections made without loading the state from the server, which would be an alternative). Another advantage is that the view state becomes bookmarkable.

是否有可以用作指导的模式?有没有人以前做过这个并且可以分享一些经验?我应该避免在 URL 中存储视图状态吗?

Is there a pattern that I can use for guidance? Has anyone done this before and can share some experiences? Should I stay away from storing view states in the URL?

推荐答案

如果需要的数据可以序列化成一个{ key, value }，那么就可以使用$location.search() 保存并在您的控制器中检索此信息:

If the required data can be seriaslized into an { key, value }, then you can use $location.search() to save and retrieve this information in your controllers:

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]);
         });
    });
})

现在您可以使用 ng-change 调用 createUrlWithCurrentState 和每个 input 元素的 ng-model并且每次更改时都会保存状态，或者您可以在 ng-click 中的 Create a link to this page 按钮中调用此函数.

Now you can call createUrlWithCurrentState with ng-change of each input element which has an ng-model and the state will be saved with each change, or you can call this function in ng-click on Create a link to this page button.

不过，您必须注意更新 allProperties 和 defaultValues 以保存所有必需的参数.

You will have to take care to keep allProperties and defaultValues updated to save all the required parameters, though.

至于是否应该这样做，答案取决于您的用例.如果您必须允许共享链接，那么除了在 URL 中保持状态之外，几乎没有其他选择.

As to whether this should be done or not, the answer depends on your use case. If you have to allow sharing of links, then there are very few alternatives to keeping state in URL.

然而，某些状态可能不容易序列化，或者数据可能太保存在 URL 中.

However, some state may not be easy to serialize or the data may just be too long to save in the URL.

如果只想保留当前会话或浏览器的检索信息，可以查看$cookieStore 或 DOM 存储 API.

If you want to preserve the retrieve information only for the current session or browser, you can look at the $cookieStore or the DOM Storage API.

这篇关于使用 Angularjs 在 URL 中存储视图状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！