Http loading animation

want to use the 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 = ${

              // 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(){

Now i use the loader in the controller like:

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

	$scope.newses = NewsService.all();

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?

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

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

	$scope.newses = NewsService.all( function() {


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

1 Like

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.

Has anyone a solution for the problem?

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

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

            .success(function (posts) {
                $scope.posts = posts;
                $scope.hasMoreData = true;
            .error(function (error) {
            .then(function() {
                $scope.initialized = true;

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.

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

1 Like

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.

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

hide : function(){

was giving hide method not found before