如何让控制器知道加载数据的状态？

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.

我正在研究一个大型的AngularJS应用程序,我试图将所有Ajax代码封装到控制器从中获取数据的各种服务中。问题围绕着需要知道任何ajax调用的状态并向用户显示正确的信息。可能没有找到数据,当前正在加载数据,或者发生了阻止加载数据的错误。需要向用户显示加载消息,“未找到数据”消息或错误消息。

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.

假设我有一个ProjectService。理想情况下,如果有一个名为getAllProjects的方法,它将返回一个项目数组。但是那样我就不知道服务器通信发生了什么。

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 ...

    }
  };

});

1 个解决方案

#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.

出于这个原因,我们找到了设置标志。我们并没有真正检查'已加载'我们只检查数据或使用成功回调。

#1