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

问题描述

什么是一般的（如果有的话）上存储视图状态作为URL的一部分 Angularjs 共识，我怎么会去这样做呢？我有很多的过滤器设置，标签等，这导致视图状态相当复杂视图/路由。

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的一部分的应用程序中（导航回将恢复$ P $与没有从服务器装载状态作出的所有的选择，这将是一种替代pvious视图）。另一个优点是，视图状态变为可标记

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?

推荐答案

如果需要的数据可以seriaslized成{键，值}，那么你可以使用 $位置.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]);
         });
    });
})

现在你可以叫 createUrlWithCurrentState 与 NG-变化每个输入元素，它有一个 NG-模型，国家将每次改变被保存，或者您也可以拨打 NG-点击此功能在创建一个链接到这个网页按钮。

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.

至于是否这个的应的完成与否，答案取决于你的使用情况。如果您必须允许链接共享，再就是对保持状态的网址很少有替代品。

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.

然而，一些国家可能不容易序列化或数据可能只是太长期在网址保存。

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

如果您想preserve只为当前会话或浏览器，你可以看看的的 $的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屋！