Loading screen until data loads from database


#1

Hello, i am making a mobile application with 4 templates, and i get some data from database in the 3d template,
and my problem is that sometimes the data tha loading is slow .
i want to use loading screen before the user go in 3d template, until the whole data loads.
how can i use the loader?


#2

Hi,
You should go with something like:

//Create a message/absolute div with background in your template
//For example
<div class="absolute-100%-100%-image" ng-if="loadingData"></div>

In your controller:

angular.module('yourApp').controller('SomeCtrl', ['$scope', function ($scope) {
  $scope.loadingData = true; // you're 'loading' data
  
  // You can use anything that will return a promise.
  $http.get('restApi').then(function(res) {

    // Data is loaded, you can hide the loading screen/message
    $scope.loadingData = false;
    
    // do stuff with your data
  });
  
}]);