Http loading animation

ionic-v1
1

Hello,
want to use the Loading “http://ionicframework.com/docs/angularjs/views/loading/” overlay for an “$http.get(” call.

I have a factory to get the json data and push it to an array

.factory('NewsService', ['$http', function($http) {
...

and a factory for the loader overlay

.factory('LoaderService', function($rootScope, $ionicLoading) {
  return {
        show : function() {

            $rootScope.loading = $ionicLoading.show({

              // The text to display in the loading indicator
              content: '<i class="icon ion-looping"></i> Loading',

              // The animation to use
              animation: 'fade-in',

              // Will a dark overlay or backdrop cover the entire view
              showBackdrop: true,

              // The maximum width of the loading indicator
              // Text will be wrapped if longer than maxWidth
              maxWidth: 200,

              // The delay in showing the indicator
              showDelay: 10
            });
        },
        
        hide : function(){
            $rootScope.loading.hide();
        }
    }
});

Now i use the loader in the controller like:

.controller('NewsCtrl', function($scope, NewsService, LoaderService) {
	LoaderService.show();

	$scope.newses = NewsService.all();
	
	LoaderService.hide();
})

But it is not the right, because it is asynchronous. The loader disables before the page complete the loading. How do i solve the problem and wait for the final loading and than use the “LoaderService.hide();” to disable the loader?

2

You need to put the hide method, in the all.

.controller('NewsCtrl', function($scope, NewsService, LoaderService) {
	LoaderService.show();

	$scope.newses = NewsService.all( function() {
             LoaderService.hide();
        });

	
})

That way it will be called after the promise resolves or fails.

1 Like
3

hey, thx for your help,
i test your code but it don’t work.

It call the loader, after the page is full loaded, the loader don’t hide.

I test the anonymous function with console log but there is no reaction.

4

Has anyone a solution for the problem?

5

Hide the loader in the then() function. This is a snippet from one of my controllers:

        var loading = $ionicLoading.show({content: 'Lade Daten...'});


        PostFactory.all()
            .success(function (posts) {
                $scope.posts = posts;
                $scope.hasMoreData = true;
            })
            .error(function (error) {
                $scope.showAlert(error.message);
            })
            .then(function() {
                loading.hide();
                $scope.initialized = true;
            });
6

Hey thx for your help.

This was one of my Code before. The problem is, i load the code from an extern json file and push it to an array and return it.

If a console.log my “MensaService.allDates()” it shows me undefined because it is empty, so i cannot use the success, error and then call.

7

Ah you return the loaded array. I thought you were returning the $http.get() instance. My bad.

1 Like
8

Ok, now i return with an extra “get” the instance an check it with “then” if its finished.
Now it works fine. Thank for your help.

9

thanks it worked for me…
had to change the factory method though

hide : function(){
$ionicLoading.hide();
}

was giving hide method not found before