I'm seeking assistance on an issue I've encountered while using angularjs 1.5.5 and angular-ui-router 0.4.2. Specifically, when refreshing the browser, I face a problem that seems to be implementation-specific.
Below is a sample code snippet of pseudo routing that defines states and how data is retrieved for those states to be used in the controller:
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);
});
});
The issue arises when navigating to the /confirmcheckout url, as it relies on data from the stateParams. If the page is refreshed, the data is lost along with the stateParams. How can this be managed without using Session Storage or Local Storage, which are discouraged?
Here's an example of how the transition occurs within the application from checkout to confirmcheckout:
$state.go('confirmcheckout', {model:someModel});
In essence, I am looking for guidance on implementing browser refresh for states that depend on stateParams to render the UI effectively.