Question

我正在使用Angular从我的Rails服务器请求一个大的JSON响应。默认情况下，模板仅显示响应的前100行。为了加快页面加载，我想请求前100个JSON响应，然后在页面加载完成后请求剩余部分。

请注意，目前有两个AJAX调用，第一次调用并将其数据传递给第二个调用。第二个调用是我需要加速并向用户显示的响应。

这是我当前的控制器代码：

app.controller('clientCtrl', function($scope, $http, $cookies) {
  $scope.clients = [];

  getClients()

function getClients(){
     return $http.get("http://localhost.com:3001/authenticate.json",
       {params:
          {token: $cookies.viewing
        }})
    .success(function(data, status){
      return $http.get("http://localhost.com:3001/clients",
        {params: {
          provider_id: data.user_id,
          source: "upload"
         }})
     .success(function(provider_data, status){
       applyRemoteData(provider_data);
      });
   });
 };


  function applyRemoteData(newClients) {
    $scope.clients = newClients;
  }
});

这是我目前的相关模板代码：

 <tr ng-repeat='client in clients | limitTo:100'>
    <td>{{client.first_name}}</td>
    <td>{{client.last_name}}</td>
    <td>{{client.email}}</td>
  </tr>

如您所见，我过滤结果并将其限制为100（至少最初）。我想请求前100个，以便表可以加载，然后在后台请求剩余的JSON对象（大约20K，大约需要6秒）。

非常感谢您提供的任何帮助。

谢谢！

Answer 1

在解决您的请求方面，AngularJS并没有什么特别之处。您所需要做的就是：

调整您的网络服务/clients，以便它可以使用范围参数。
调整客户端代码以将其余参数传递给此参数。您可能希望将其设为方法参数，例如function getClients(max)。
调整getClients结果处理程序回调以合并，替换或追加结果数据。如果你想要超级高效，你也应该只进行一次身份验证。
调整您的初始调用以传递此参数（getClients(100)）。

再次调用getClients，没有max（0）。古老的技巧是setTimeout：

setTimeout(function() {
    // Now load the rest, but we've drawn the UI by now...
    getClients(0);
}, 250);

您可能还想查看https://github.com/YuzuJS/setImmediate，这是setTimeout的一个很好的替代品。如果你想让它尽可能快，它会使用各种浏览器黑客来获得近乎即时的回调。

AngularJS：如何加载前N个NSON响应，然后在页面渲染后请求休息

1 个答案: