问题描述
关于在 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 中存储视图状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!