How to load data prior to page display in AngularJS and Restangular?

Question

I have been using AngularJs with Restangular with PHP backend. I am calling a function based on route (detail/list) to fetch into variable from Restangular.

The problem is if there is a delay in database connection the page is displayed blank and after a few(2-3) seconds the data is filled and shown,

The issue repeats when navigating to details and going back to the list page.

Answer 1

Here is an example how you can resolve your data before the page is rendered (w/o blank screen):

The 'resolve' function is called before the view is rendered.

$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();
        }

    }
});

Just pass the resolved object (task in this example) as argument into your controller:

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

However, let me point out that this approach is not always the best solution, because the user does not get immediate feedback after changing the route. Consider loading your data in the controller and display a spinner until the data arrived.

Answer 2

I assume that you still need to wait for data loaded, so to draw view without the data and load date later you can use next in the controller constructor:

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