Javascript 将AngularJS应用程序的修改状态保存到URL

Javascript 将AngularJS应用程序的修改状态保存到URL,javascript,url,angularjs,state,browser-history,Javascript,Url,Angularjs,State,Browser History,我有一个用户填写并提交的相当复杂的HTML表单。在提交时,我们重定向到第三方网站,根据表单值生成重定向参数。然后,如果用户对第三方网站上的结果不满意,他们会按浏览器的“后退”按钮,然后返回表单。此时,他们希望看到表单控件处于重定向之前的状态 在Backbone.jsapp.navigate(“/form view/STATE-OF-THE-form-SERIALIZED”)中,在重定向之前,表单的状态将保存到浏览器的历史记录中–在URL片段中。我如何为AngularJS实现相同的行为?我读过关于

我有一个用户填写并提交的相当复杂的HTML表单。在提交时,我们重定向到第三方网站,根据表单值生成重定向参数。然后,如果用户对第三方网站上的结果不满意,他们会按浏览器的“后退”按钮,然后返回表单。此时,他们希望看到表单控件处于重定向之前的状态


在Backbone.js
app.navigate(“/form view/STATE-OF-THE-form-SERIALIZED”)
中,在重定向之前,表单的状态将保存到浏览器的历史记录中–在URL片段中。我如何为AngularJS实现相同的行为?我读过关于服务的文章,但它没有提供那种功能。当我在其上调用
path(SMTH)
时,它总是触发路由处理程序;这不是我想要的,因为此时我必须重定向到外部页面。

您可以将其序列化为JSON(或QueryString)形式。首先这样做,然后使用参数作为URL的一部分构建URL

确保您有两个URL:一个用于没有任何数据的表单,另一个用于有数据的表单

$routeProvider.when('/form-data', { ... });
$routeProvider.when('/form-data/:data', { ... });
然后设置一个提交函数来处理数据的传递

$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;
};
对于处理
/form data/:data
路由的控制器,使用
$routeParams
访问URL中的
:data
参数


如果您希望它在另一个页面中弹出,那么您需要制定自己的指令,该指令将劫持表单提交事件并更改“action”属性,以便在处理本机提交之前将其更改为序列化格式。

您看过angular的ui路由器吗?没有。这个?谢谢你的回答,但这不是重点。从URL恢复表单状态没有任何问题。麻烦的是在URL中保留人工所做的更改:输入文本、单击复选框等;就在他们发生的时候。因此,即使没有提交表单,用户也可以安全地从表单视图导航,然后返回,并查看保留的所有更改。@matsko,如果数据太大,我实际上不得不将其作为post而不是get发送,该怎么办?在这种情况下,我的URL不会因为序列化数据太大而被截断吗?