Saving the modified state of an AngularJS application to the URL

Question

I've got a rather complex HTML form that users fill in and submit. On submit we redirect to a third party Web site, generating that redirect parameters depending on the form values. Then, if users aren't satisfied with the results on the third party Web site, they press the browser's "Back" button, and return to the form. At this point they'd expect to see the form controls in the state they left them before the redirect.

In Backbone.js I could call app.navigate("/form-view/STATE-OF-THE-FORM-SERIALIZED") before the redirect, and the form's state would be saved to the browser's history – in the URL fragment. How would I go about implementing the same behavior for AngularJS? I've read about $location service, but it doesn't provide that kind of functionality. When I call path(SMTH) on it, it always triggers the route handler; and that's not what I want, as I must redirect to an external page at that point.

Have you looked at angular's ui-router?

Lukus
– Lukus

2013-08-29 07:20:02 +00:00
Commented Aug 29, 2013 at 7:20 — Lukus
– Lukus, Commented Aug 29, 2013 at 7:20
Nope. This one? github.com/angular-ui/ui-router

Ivan Krechetov
– Ivan Krechetov

2013-08-30 07:33:04 +00:00
Commented Aug 30, 2013 at 7:33 — Ivan Krechetov
– Ivan Krechetov, Commented Aug 30, 2013 at 7:33

matsko · Accepted Answer · 2013-09-14 15:01:19Z

1

You can either serialize it in JSON (or QueryString) form. Do that first and then build up the URL with the parameter as apart of the URL.

Make sure you have two URLs: 1 for the form without any data and another for when it has data.

$routeProvider.when('/form-data', { ... });
$routeProvider.when('/form-data/:data', { ... });

Then setup a submit function to handle passing the data around.

$scope.submit = function() {
  var formData = JSON.stringify($scope.myModel);

  //redirect to internal angularjs page
  $location.path('/form-view/' + formData);

  //or redirect to a local external page
  $window.location = '/form-view/' + formData;
};

And for the controller which handles the /form-data/:data route, use $routeParams to gain access to the :data param in the URL.

If you want it to popup in another page then you'll need to make your own directive which hijacks the form submission event and changes the "action" attribute to change it to the serialized format before the native submission is handled.

answered Sep 14, 2013 at 15:01

matsko

22.3k22 gold badges106 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan Krechetov Over a year ago

Thanks for the answer, but that's not the point. I don't have any trouble restoring the form state from the URL. The trouble is preserving in the URL the changes made by a human: typing into text inputs, clicking check-boxes, etc; right when they happen. So that even if no form is submitted, the user can safely navigate from the form view, then come back, and see all the changes preserved.

Michael Osofsky Over a year ago

@matsko, what if the data is so huge I'm actually having to send it as a post rather than as a get? In that case, won't my URL get truncated with the serialized data being so big?

Collectives™ on Stack Overflow

Saving the modified state of an AngularJS application to the URL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related