如何在AngularJS和Restangular中在页面显示之前加载数据？

Question

我一直在使用AngularJs和PHP后端的Restangular。我正在调用一个基于路由(detail/list)的函数，以便从Restangular获取变量。

问题是，如果数据库连接出现延迟，页面将显示为空白，几秒后(2-3秒)，数据将被填充并显示，

当导航到详细信息并返回到列表页时，此问题会重复。

Answer 1

下面是一个如何在呈现页面之前解析数据的示例(w/o空白屏幕)：

在呈现视图之前调用“解析”函数。

$routeProvider.when('/admin/task/:id' , {
    templateUrl: '/app/task/admin-task-results.tpl.html',
    controller:'AdminTaskDetailsCtrl',
    resolve: {
        task: function($route, Restangular) {
            return Restangular.one('tasks', $route.current.params.id).get();
        }

    }
});

只需将已解析的对象(本例中的任务)作为参数传递到控制器：

module.controller('AdminTaskDetailsCtrl', function ($scope, task) { ... });

但是，让我指出，这种方法并不总是最好的解决方案，因为用户在更改路由后不会立即得到反馈。考虑将数据加载到控制器中，并在数据到达之前显示一个旋转器。

Answer 2

我假设您仍然需要等待加载的数据，因此，为了在没有数据和加载日期的情况下绘制视图，可以在控制器构造函数中使用next：

$scope.$on('$viewContentLoaded', function(){
  // Load data into model here
});