跨单页面视图翻转和多页翻转维护应用程序状态

时间:2014-01-30 01:22:18

标签: angularjs

嗯,随着技术的进步,我们很久以前解决的问题再次出现。

回到黑暗时代,当PHP和ASP被认为很棒时,我们总是遇到视图状态问题。如果你有一个页面上有十几个选择组合框,你的用户选择一些组合并点击下一步,然后意识到他们搞砸了并点击浏览器上的后退按钮,组合框将恢复到默认状态,通常选择了选项[0]。为了防止这种情况,我们不得不编写大量的样板代码,将这些组合框的状态保存到cookie或会话变量,或者当用户点击后退按钮时,我们可以重新加载组合框到他们离开时他们所处的状态。

如果您在屏幕上有数据网格,则此问题更加复杂。因为那时你必须想出一些灵活的方法来保存那个网格,以防止不得不再次访问数据库。

然后是光明。浏览器开发人员意识到,由于这个问题,大多数Web开发人员都会回到编写Cobol中的终端程序,并在浏览器中添加了UI缓存。这让我们webdevs不再需要担心这个问题,除非在奇怪的情况下。

所以,生活很美好。然后有人提出了一个明智的想法,试图复制GWT,没有所有的麻烦和网络爆炸与所有这些JavaScript框架。目前正在处理的是AngularJS 1.2.10和Angular-UI。直到星期五(很可能是星期三),我才能对这项技术是否是我们现行标准(几乎普遍讨厌的)JSF的可行替代方案进行初步评估。

所以,我按照一些指南,将我的头撞在桌子上几次,我有一个带有3个实际HTML页面的角度应用程序,每个HTML页面有2个视图。

在你去那里之前,要知道我们不能使用它,除非我们可以做多页JS应用程序。将要开发的一些应用程序已经开发了十年或更长时间,并且废弃整个用户界面并重新开始实际上在经济上不实用。我们会做一些事情,比如把这50个struts页面转换成angular / rest并将它们无缝链接回应用程序的剩余800个struts页面。

所以在我玩这个游戏时,我遇到了我的老头。后退按钮查看状态问题。

我一直在玩UI路线系统。我可以使用路线系统深度链接的事实解决了我的部分问题。但是,如果说我有这样的搜索页面:

view-search
    combo: search type [member,nonmember]
    combo: result type [detail,summary]
    combo: search state {all the states]
    textbox: contract number
    etc etc etc

组合框选择和文本条目的各种组合提供了1000人的列表。现在,用户在数据网格上选择其中一个人,它将带您查看详细信息。那么你可以使用路由来做index.html#detail/bob这样的事情很酷,但如果用户意识到这是错误的bob并点击后退按钮,他们会再次获得一个空白的搜索屏幕,他们必须输入所有内容并且更糟糕的是,将另一个搜索发送到数据库以重建datagrid。其中一些屏幕在搜索数据时有50个或更多可供选择的选项,因此尝试将所有这些选项放入URL路由声音对我来说完全不切实际。

现在在我的研究中我找到了这篇文章:

Preserve state with Angular UI-Router

这有希望主要是因为我有一个视图状态对象,我可以存储到Redis数据库或会话EJB中,以便用户实际跳出角度并进入传统的Struts应用程序,然后将按钮返回到角度应用程序,但事实仍然是,在其中一些页面上,为了使其工作,我们必须编写大量的样板代码。

我真的不介意必须手动保存视图状态对象,并在用户进入或离开系统中的HTML页面时从Redis服务器或其他任何内容读取它。我真正想要的是一种自动生成要保存的对象而无需编写大量锅炉代码的方法。

这可能吗?我一直在阅读ui-route文档,但它看起来并没有得到解决,至少不是我已经翻译过的。

如果可以,我应该看一下哪些控件?

感谢

--------------编辑

我只是想到了什么。每个单页面应用程序都有一个中心范围。 (我基本上将构建多个单页应用程序并将它们连接在一起)所以,如果我使用命名约定,像这样的东西

$scope.viewstate.view-search.searchType
$scope.viewstate.view-search.resultType
$scope.viewstate.view-search.searchState

然后viewstate对象应该只是一个js数组,当我创建一个移动到struts.do的函数时,我可以简单地将该数组作为嵌套的地图对象保存到Redis服务器上。然后当我的用户返回按钮返回角度应用程序时,我可以使用路径系统捕获它并从Redis检索该视图状态对象并将其插回到我的范围中,从而一次性重建整个单页面应用程序的范围。

那会有用吗?

2 个答案:

答案 0 :(得分:2)

我认为您有一个非常复杂的问题,即尝试将不同页面之间的视图状态与页面中的数据量保持一致。我认为唯一真正有效的方法是编写一个角度服务,然后将其传递给各个页面。正如您已经知道的那样,该服务是一个可以在各种控制器中使用的单例,可用于维护视图状态,如您所述。在这里看看这个链接,看看它是否有用:http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/

经过一番思考后,您在编辑中建议的内容可能有效,但我仍然会使用服务来检索该数据数组,因为这样可以更容易地重新插入角度范围

答案 1 :(得分:2)

我正在为我正在编写的Angular应用程序探索类似的东西。在页面刷新期间保持用户登录很容易。刷新后在页面上显示状态是一个完全不同的问题。

国家必须坚持多久?我正在评估两种可能性。

首先,将状态(当前表单值或其他)保存到数据库。随着页面的更改,逐步将状态保存到数据库。在浏览器刷新时,检查数据库以查找已保存的值。

其次是使用本地浏览器存储。这是5兆的存储空间。 5兆是很多文字。同样,这些数据将逐步保存到存储中。浏览器刷新后,只需从localStorage加载数据。