AngularJS Route: when switching through routes, form becomes empty after re-loading the page?

Question

I have a simple app built with AngularJS routes which is loading the controller and template for each path. I have a register form and login form on separates paths/templates. Say I go to the login form (/#/login) and enter my username/password, if I then hit "Register" (redirects me to /#/register), and then I hit back in my browser, it will return me to /#/login but the form will now be empty; the information I typed in has been removed.

Expected behaviour would be that the form data is still there.

Anyway to make that happen (without manually caching the data in a service)?

I'm guessing when the page changes, Angular is tossing the old template data and reloading the template again. Is there a way to instead cache that page template/DOM and reload it when the user returns to that path (instead of downloading and showing new template file)?

Answer 1

Well, this is a bit tricky. The browser should implement this kind of feature out of the box. Firefox started doing some work around this "issue" but I don't really know the current status of it.

Alternatively you can use a bit of javascript with LocalStorage to make this works. You're using AngularJS you can create a Directive that encapsulates this feature to be used on multiple places.

Basically you need to create a mechanism that translate an field to and unique-identifier and a value. Every time the user type on the field, you update the store. If the user "finish" the interaction on the form, you clean the value from the store.

You can also grab a jQuery plugin and just create a directive that uses the plugin. https://github.com/kugaevsky/jquery-phoenix (never tested it).

TL:DR

There's nothing you can't do using a DOM property/attribute or something similar. You'll need to get your hands dirty on some javascript to make this happen.