How do I let my controller know of the status of loading data?

Question

How do I let my controller know of the status of loading data?

I'm working on a large AngularJS app in which I am trying to encapsulate all my Ajax code into various services which the controllers get data from. The problem revolves around needing to know the status of any ajax calls and displaying the correct information to the user. There could be no data found, data currently loading, or an error that has occurred preventing data from being loaded. The user needs to be shown a loading message, a "no data found" message, or an error message.

Let's say I have a ProjectService. Ideally if there was a method called getAllProjects it would return an array of projects. But that way I have no idea what is happening with the server communication.

So how to I let the controller know if data is loaded, loading, or an error has occurred? The best way I can come up with is using callbacks like in the pseudo code below. Is there any better way to accomplish such a thing or anything I may be overlooking?

Thanks.

app.controller( "ProjectController", function( $scope, ProjectService ){

  // Set the initial / default status
  $scope.loadStatus = "loading";

  // Return an empty array initially that will be filled with
  // any data that is returned from the server
  // The callback function will be executed when the ajax call is finished
  $scope.projects = ProjectService.getProjects(function( status ){

    // Alert the controller of a status change
    setStatus( status );

  });

  function setStatus( ){
    $scope.loadStatus = status;

    // ... update the view or whatever is needed when the status changes....
  }

});

app.service( "ProjectService", function( $resource ){

  return {
    getAllProjects: function(){

      // ... load and return the data from the server ...

    }
  };

});

javascript
ajax
angularjs

Answer 1

In our codebase we've just been doing

$scope.flags.loading = true;
$http(...).success(function(){
  $scope.flags.loading = false;
});

Yes, this is sort of simplistic, but not all queries require a loading overlay (such as during pagination or refreshing). This is why we have opted not to simply use a decorator.

However, lets say you want to, I can think of a few ways of doing this. Lets say you're like us and keep your flags together in an object. Then you can use associations to your advantage:

MyService.flags = $scope.flags
... (inside the service) ...
this.flags.loading = true/false;

By establishing a reference as a property of the service, you can do all the state toggling from within the service, and avoid cluttering your controller. Again though, this might create the possible drawback of having 2 or more close-together queries conflicting (first query finishes and removes the loading state before the second one completes).

For this reason we have been find with setting the flag. We don't really check for 'loaded' we just check for data or use success callbacks.