Maintaining the state of the application when viewing individual pages and multi-page flips

Question

Well, with the development of technology, the problems that we have solved a long time ago arise again.

Back in the dark ages, when PHP and ASP were considered amazing, we always had a problem with view states. If you had a page with a dozen combo boxes, your user selects the combination and hits, and then realizes that they messed up and clicked the back button in the browser, the combo box will return to the default state, usually with the [0] option selected ]. To avoid this, we had to write a boat with a code template that would save the state of these combined boxes in a cookie or a session variable or something else, so that when the user clicks the back button, we can reload the list box back to the state in which they were when they left.

This problem is further exacerbated if you had a datagrid on your screen. Because then you have to come up with some kind of spotty way to save this grid somewhere so that there is no need to hit the database again.

Then the light came. Browser developers realized that most web developers were on the verge of returning to writing terminal programs in Cobol because of this problem, and they added user interface caching to browsers. This allowed us webdevs not to worry about this anymore, except in odd situations.

So life was good. Then someone came up with a bright idea about trying to replicate GWT without any hassle, and the Internet explodes with all these javascript frameworks. This is currently the AngularJS 1.2.10 currently defined with Angular-UI. I have until Friday (most likely on Wednesday) to make an initial assessment if this technology is a viable alternative to our current standard (which is largely universally hated) by JSF.

So, I follow some guidelines, hit my head on the table several times, and I have an angular app with 3 relevant HTML pages, each HTML page with 2 views.

Before you go there, understand that we cannot use it if we cannot use multi-page JS applications. Some of the applications with which this will work have been under development for a decade or more, and it is simply not financially feasible to abandon the entire user interface and start over. Instead, we will do things like taking these 50 pages of layouts and converting them to angular / rest and smoothly switching them back to the remaining 800 pages of the struts application.

Thus, in my exercise with this, I encounter my old hostility. Problems displaying the status of the back button.

I played with the UI route system. The fact that I can deeply connect the route system solves some of my problems. But, if I say that I have a search page, for example:

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

And various combinations of combo options and text entries contain a list of 1000 people. Now the user selects one of these people in the data grid, and he takes you to view the details. Well, the fact that you can use routing to do something like index.html#detail/bob is cool, but if the user realizes that this is the wrong bean and gets to the back button, they again get a blank search screen and they have to enter everything as before, send another search to the database to rebuild the datagrid. Some of these screens have 50 or more choices when searching for data, so trying to put all of them in the URL routing sounds is completely impractical for me.

Now in my research, I found this post:

Save state with angular UI-Router

And that makes sense mainly because I have a view state object that I can store in a Redis database or EJB session for cases when the user really jumps from angular and to the legacy Struts app and then back buttons back to the angular app but the fact is still the fact that on some of these pages this is a huge template code that we would have to write to make it work.

In fact, I do not mind the need to manually save the view state object and read it back from the Redis server or something at any time when the user enters or leaves an HTML page in the system. What I'm really looking for is a way to automatically create an object that needs to be saved without having to write boiler code volumes.

Is it possible? I keep reading the ui-route documentation, but it doesn't seem like it's fixed, at least I haven't translated it yet.

If possible, which controls should I look for?

thanks

-------------- Edit

I just thought. For each of the single-page applications, there is one central area. (Im basically going to create several applications with one page and connect them together). So if I use a naming convention, something like this

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

Then the viewstate should just be a js array, and when I create a function to go to struts.do, I can just save that array on the Redis server as a nested map object. Then, when my custom buttons go back to the angular application, I can fix this using the route system and get this viewstate from Redis and paste it back into my area, thereby restoring the area for the entire application of one page in one shot.

Will this work?

Answer 1

I believe that you have a very difficult problem, which is trying to maintain presentation states between your different pages with the amount of data on your pages. I think the only real effective way to do this is to write an angular service that you can pass to different pages. since you already know that the service is singleton, which you can use in various controllers and can be used to maintain the state of the view, as you described. look at this link and see if it helps: http://txt.fliglio.com/2013/05/angularjs-state-management-with-ui-router/

After you think about what you offer in your editing, it may work, but I will still use the service to retrieve this data array, as this will make it easy to reconnect to angular scope

Answer 2

I am learning something similar for the Angular application that I am writing. Easy login during page refresh. Displaying state on page after refresh is a completely different issue.

How long should the condition last? I appreciate two possibilities.

First save the state (current form values ​​or something else) in the database. As the page changes, incrementally save the state in the database. In a browser update, check the database for stored values.

The second is to use local browser storage. This is 5 megabytes of storage. 5 megabytes is a lot of text. Again, this data will be gradually added to the repository. When the browser refreshes, just download the data from localStorage.