Refresh page request in angular-Js

Question

I am new to angularjs . Here I have a problem, when I login in application and then I am on some page which requires the server response. So,

In my controller I do

if (localStorage.getItem('authToken') === null || localStorage.getItem('authToken') === undefined) {
        $state.go('default.login');
      } else {
     /// all other part of controller


$scope.loadReports = function () {
          $scope.loadingReports = true;
          if ($scope.documentType === "jobDescription") {
            $scope.showcheckbox = false;
            $scope.showSendButton = false;
          }
          var jdCurrentFileName = jdService.getjdUniqueId();
          uploadService.loadReports(uploadService.currentFileName, $scope.documentType, jdCurrentFileName)
            .then(function (response) {
},
            function (error) {
              $scope.loadingReports = false;
              $scope.errorMessage = error.status + " : " + error.statusText;
              if (error.status === 401) {
                loginService.authenticationError();
              }
            });

Now, what is happening here is that when I refresh a page then what ever data I had set in service using setter that all data get lost. So, while calling this service in services

loadReports: function (fileName, docType, jobId) {
                    var url = 'rez' + '/reports/' + docType + '/' + fileName + '/' + jobId;
                    var config = {};
                    config.headers = {
                        "X-AUTH-TOKEN": loginService.getAuthToken()
                    };
                    return $http.get(url, config)
                        .then(function (response) {
                            return response.data;
                        },
                        function (error) {
                            $log.error(error);
                            return $q.reject(error);
                        });
                },

If You see then jobId is coming from the service setter But when I refresh then all the service set values gets lost . SO, can any one please help me with this? How to do refresh requests in angular ?

Answer 1

A single page application in AngularJS/Angular is not designed to accommodate browser refresh. The values you need to retain after a browser refresh need to be stored in storage, localstorage or sessionstorage . use

To Set

localstorage.setItem("yourkey",value);  
sessionstorage.setItem("yourkey",value);  

To Retrive

localstorage.getItem("yourkey");
sessionstorage.getItem("yourkey");

If you intent to refrest the data shown on a page by browser refresh, then you have to make the object listen to an event (the event that could cause your data to change)