Tips for preloading data before showing the page using AngularJS and Restangular

Question

Tips for preloading data before showing the page using AngularJS and Restangular

I have been incorporating AngularJs and Restangular with a PHP backend. Currently, I am utilizing a function that is triggered by the route (detail/list) to retrieve data from Restangular and store it in a variable.

However, the challenge arises when there is a delay in establishing a connection with the database - the page appears blank initially, and then after a brief delay of 2-3 seconds, the data finally populates and displays.

This issue persists when navigating between the details and list pages.

javascript angularjs restangular

Answer 1

Answer №1

One way to handle data before the page loads without a blank screen is by using the 'resolve' function:

The 'resolve' function executes 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();
        }

    }
});

You can then pass the resolved object (in this case 'task') as an argument to your controller:

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

It's worth noting that this approach may not always be ideal as it delays user feedback when changing routes. It may be better to load data in the controller and show a spinner until the data is available.

Answer 2

One way to handle data before the page loads without a blank screen is by using the 'resolve' function:

The 'resolve' function executes 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();
        }

    }
});

You can then pass the resolved object (in this case 'task') as an argument to your controller:

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

It's worth noting that this approach may not always be ideal as it delays user feedback when changing routes. It may be better to load data in the controller and show a spinner until the data is available.

Answer 3

Answer №2

If you are waiting for data to be loaded before drawing the view, you can utilize the following method in the controller constructor to initially render the view without the data and then load the data later:

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

Answer 4

If you are waiting for data to be loaded before drawing the view, you can utilize the following method in the controller constructor to initially render the view without the data and then load the data later:

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

Tips for preloading data before showing the page using AngularJS and Restangular

Answer №1

Answer №2

Similar questions

Are Json files a reliable choice for storing data in Next.js applications?

Transitioning from AngularJS to Flux: Embracing the React methodology

Is it possible for attribute directives to utilize transclusion?

Controlling API requests using JavaScript, Python, and Bash

Turn off automatic play on the spotify software development kit

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

The servlet is successfully receiving a JSON post, but unfortunately, it is not being displayed

Using a try block inside another try block to handle various errors is a common practice in JavaScript

Verify if the element in the array is set to true

Facing issues connecting index.js to the database in React and unable to resolve the problem

Tips on presenting messages to users after clicking the submit button?

Tips for triggering the API call only when a change is detected

Is Joi's existence a myth?

Angular-Foundation Multi-Level Off-Canvas Menu: A Unique Navigation Solution

Come together with Array starting from the specified startIndex and ending at the

How can you use ui.router to set up one controller as the child of another controller?

tips for efficiently loading JSON files using Angular

In Node.js, when using the `new Date(year, month, date)` constructor, the date is automatically converted to UTC

Imitate a HTTP request

Setting up Babel to effectively function across multiple directories