1

Suppose there is a size several link. Every link click is handled by controller. Consider the situation:

  1. User visit some page. Let say that it is /search where user inputs keywords and press search button.
  2. A background process started (waitint for search response in our case)
  3. user goes to another link
  4. after some time user goes back to fisrt page (/search)

At the point 4 angulajs load page as user goes to it at first time. How to make angulajs remeber not state but process? E.g. if process is not finished it shows progress bar, but if it finished it give data from process result and render new page. How to implement that?

Notes

  • I have found this but this is about just state without process saving.
  • I have found that but this is about run some process at background without managing results or process state (runing or finished)
2
  • you only want to remember that there was an api call in progress when user goes back to the previous screen ? Commented Jul 2, 2018 at 5:47
  • Just storing original promise returned from $http is for sure enough - not sure what can be added here. Commented Jul 2, 2018 at 9:36

2 Answers 2

0

You can use angularjs service to remember this "Process" of making an api call and getting the data from it . here is a simple implementation.

the whole idea here is to create a angular service which will make an api call, store the data aswell as the state of the data, so that it can be accessed from other modules of angularjs. note that since angularjs services are singleton that means all of their state will be preserved.

app.service('searchService', function() {
    this.searchState={
     loading: false,
     data: null,
     error: null
    }
    this.fetchSearchResults = function(key){
    // call api methods to get response
    // can be via callbacks or promise. 

     this.searchState.loading=true;

     someMethodThatCallsApi(key)
      .then(function(success){
        this.searchState.loading=false;
        this.searchState.data=success;
        this.searchState.error=null
       })
      .catch(function(error){
       this.searchState.loading=false;
       this.searchState.data=null;
       this.searchState.error=error
      });

    }
    this.getState = function(){
      return this.searchState
    }
});

// in your controller

app.controller('searchController',function(searchService){
   // in your initialization function call the service method.
   var searchState = searchService.getState();
   // search state has your loading variables. you can easily check 
   // and procede with the logic.
   searchState.loading // will have loading state
   searchState.data // will have data
   searchState.error // will have error if occured.
});

Even if you navigate from pages. the angular service will preserve the state and you can get the same data from anywhere in the application. you simply have to inject the service and call the getter method.

Sign up to request clarification or add additional context in comments.

Comments

0

Based on the question, (a little bit more context or code would help answers be more targeted), when considering async operations within angularJS, its always advisable to use getters and setters within service to avoid multiple REST calls.

Please note - Services are singletons, controller is not.

for eg:

angular.module('app', [])
   .controller('ctrlname', ['$scope', 'myService',  function($scope, myService){

    myService.updateVisitCount();
    $scope.valueFromRestCall = myService.myGetterFunctionAssociated(param1, param2);

    //Use $scope.valueFromRestCall to your convinience.

   }]

   .service('myService', ['$http', function($http){

        var self = this;
        self.numberOfVisits = 0;
        self.cachedResponse = null;

        self.updateVisitCount = function(){
            self.numberOfVisits+=1;
        }

        self.myGetterFunctionAssociated = function(param1, param2){
            if self.cachedResponse === null || self.numberOfVisits === 0 {
                return $http.get(url).then(function(response){
                    self.cachedResponse = response;
                    return response;
                });
            }
            else {
                      return self.cachedResponse;
                 }
        }

        return {
            updateVisitCount: function(){
                 self.udpateVisitCount();
            },
            myGetterFunctionAssociated : function(param1, param2){
                 return self.myGetterFunctionAssociated(param1, param2);
            }
        }

   }]

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.