Using Angular Js Ui router, I am able to call a function and retrieve data from the Db successfully after clicking a button.
However, when the browser is refreshed, the data becomes null and triggers a 500 error response.
The issue seems to be related to the state configuration path and the null values in the controller. Is there a way to persist the data in the ui-state provider?
Example Url:
http://localhost/Myproject/#/home/Retailer/retailerId=1?retailerCode=3
On button click, the values are passed as parameters:
$state.go('Home.retailer', { 'retailerId': $scope.param1, 'retailercode': $scope.param1});
Upon page refresh, the values become null in the module.
.state('home.retailer', {
url: '/contract/:retailerId:9?retailercode:1',
params:{
'retailerId': '9', 'retailercode': '1'
},
views: {
'@': {
templateUrl: baseUrl + 'retailr/retailerList',
controller: 'home',
}
},
data: {
Name: '',
Img: 'Images/1.png'
}
})
Note: On button click, the service should return the data.
Issue: Upon page refresh, the module checks home.retailer and reverts to the service. How can the data be persisted when refreshing the browser?
Specifying the parameters is crucial: params:{ 'retailerId': '9', 'retailercode': '1' },
Due to the null response, the retailer id and code are passed to the service inside the controller.
`RetailerService.pageLoad($scope.retailerId,$scope.retailercode)` when the button is clicked ,
RetailerService.pageLoad($scope.retailerId :9 ,$scope.retailercode :1) ,
Upon page refresh: RetailerService.pageLoad($scope.retailerId : null,$scope.retailercode : null)`