CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-routing
Mohamed Sahir
Mohamed Sahir

Reputation: 2543

Angular ui -router Page browser Refresh Showing null values ?How could persist the data?

I am using Angular Js Ui router, when click the button, i have call the function and take over the params and calling the service and getting a results from Db. working good.

In the point of time.

When Browser refresh the page, the value gets null and respone get 500 error.

It looks into State configuration path and go to the controller,there have null values. How could persist the data in ui-state provider.

Url Look like :
http://localhost/Myproject/#/home/Retailer/retailerId=1?retailerCode=3

When I click the button i have carry over the value
 $state.go('Home.retailer', { 'retailerId': $scope.param1, 'retailercode': $scope.param1});



While refersh the page, the values getting null in 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: When button click i have get the value , so service will return the data.

Problem: when refresh the page, it goes into module and check the home.retailer , and back to the service. how could to persist the data when refresh the browser.

what exactly this could do: params:{ 'retailerId': '9', 'retailercode': '1' },

Because of null, response Here I am passing the retailer id and Retailer code in service inside the controller. 
 `RetailerService.pageLoad($scope.retailerId,$scope.retailercode)` when Click the button ,
RetailerService.pageLoad($scope.retailerId :9 ,$scope.retailercode :1) , 



Page Refresh RetailerService.pageLoad($scope.retailerId : null,$scope.retailercode : null)`

Upvotes: 1

Views: 1442

Answers (1)

user2263572
user2263572

Reputation: 5606

To persist data on refresh you will need to store it in browser storage. Here is a good example of a factory using localStorage.

app.factory("storageFactory", function($window) {
  return {
    setData: function(val) {
      $window.localStorage && $window.localStorage.setItem('my-storage', val);
      return this;
    },
    getData: function() {
      return $window.localStorage && $window.localStorage.getItem('my-storage');
    }
  };
});

So you will set data at various times in your controller, and then call get data on page load to ensure any pre-set vars are captured.

Edit: As mentioned below instead of localStorage, sessionStorage is also an option. What you choose should be dependent on your needs.

Upvotes: 4

Related Questions