Angular UI 状态参数 - 浏览器刷新

Question

这可能已经回答了（如果是，请指点我到正确的地方），否则如果您有任何可行的解决方案，请告诉我。

我正在使用 angularjs 1.5.5、angular-ui-router 0.4.2 并在刷新浏览器时遇到问题（可能是特定于实现的）。

这里是一个示例伪路由代码，它定义了状态以及如何为状态带来数据，然后可以在控制器中使用。

    myApp.config(function($stateProvider) {
    // An array of state definitions
    var states = [    
     { 
       name: 'checkout', 
       url: '/checkout',
       templateUrl: 'app/checkout/view/checkout.html',
       controller: 'checkoutController'     

     },

     { 
       name: 'confirm-checkout', 
       url: '/confirmcheckout', 
       params: {model: checkoutModel},
       templateUrl: 'app/checkout/view/confirmcheckout.html',
       controller :'checkoutConfirmationController',
       resolve: {
       person: function(people, $stateParams) {
           return someService.someApi($stateParams.model)
       }
     }
   }
  ]

  // Loop over the state definitions and register them
     states.forEach(function(state) {
       $stateProvider.state(state);
     });
  });

如您所见，/confirmcheckout url 取决于 stateParams 提供的数据。假设我们导航到 /confirmcheckout url（通过路由器，它正确显示 confirmcheckout.html 并通过 someService.someApi 调用解析所有数据。此时，如果我刷新浏览器，angularjs 将重新初始化 javascript 模型/服务等等。这意味着，我的 stateParams 将丢失，页面 confirmcheckout.html 将丢失所有数据。如何处理这种情况下的页面刷新。不鼓励使用会话存储和本地存储https://docs.angularjs.org/guide/security（请参阅使用本地缓存）

以下是应用程序从结帐到确认结帐的转换过程。

$state.go('confirmcheckout', {model:someModel});

简而言之，如何为依赖于 stateparams 呈现 UI 的状态实现浏览器刷新？

Answer 1

您可以在 URL 中保存使用查询参数。

在我们的例子中

   url: '/confirmcheckout?model', 

见https://ui-router.github.io/ng1/docs/latest/classes/params.paramtypes.html#query