Loader not being shown on ajax request in angular js

Question

Since I am using ajax request using $http. It takes a long time since my operation on server takes time. I need to show loader while processing request, but the loader does not show. Although my code seems correct. I tried different methods but did not work.

Index.html

<body ng-app="app">

    <!-- loader, can be used on multiple pages-->
    <div class="loading loader-quart" ng-show="isLoading"></div>

<!--         my logic       --> 

</body>

addCtrl.js

//method to get all the attributes and send to server using service
    $scope.add = function () {
        if ($scope.Option == 'newInstance')
            $scope.singleObject.FK_Name = 'MetisEmptyTemplate';
        $rootScope.isLoading = true;
        var featuresList = websiteService.getUpdatedTree($scope.treeDataSource);
        var formData = new Website("", $scope.singleObject.Name, $scope.singleObject.DisplayName, $scope.singleObject.Description, $scope.singleObject.State, "", $scope.singleObject.FK_Name, $scope.singleObject.Email, featuresList);

        websiteService.addwebsite(formData);
        $rootScope.isLoading = false;
    }

websiteService.js

//service to add website
    this.addwebsite = function (website) {
        $http({
            method: 'POST',
            url: $rootScope.url + 'Add',
            data: JSON.stringify(website),
            contentType: 'application/json'
        }).success(function (data) {
            alert(data);
        }).error(function (data, status, headers, config) {
            //alert(data);
        });
    }

Since I am going to turn isLoading as "true" in start and then after request completes I turn isLoading "false". Where is the problem in code?

You set it on the $rootScope, so you need to do: ng-show="$root.isLoading" — devqon
– devqon, Commented Oct 13, 2016 at 11:36
But that also does not work. Since rootscope can access everything within app — CodeGenius
– CodeGenius, Commented Oct 13, 2016 at 11:38

Erik Svedin · Accepted Answer · 2016-10-13 11:27:20Z

1

Your websiteServices code gets executed asynchronously. Which means that the above code would display the loader and then pretty much hide it again instantly.

To handle async code in the controller you must return a promise from the service and put the hiding of the spinner in a callback function using .then().

service:

this.addwebsite = function (website) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: $rootScope.url + 'Add',
        data: JSON.stringify(website),
        contentType: 'application/json'
    }).success(function (data) {
        alert(data);
        deferred.resolve(data);
    }).error(function (data, status, headers, config) {
        //alert(data);
        deferred.reject(data);
    });
    return deferred.promise
}

controller:

websiteService.addwebsite(formData).then(function(){
    $rootScope.isLoading = false
});

answered Oct 13, 2016 at 11:27

Erik Svedin

1,28612 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

CodeGenius Over a year ago

do i need to include dependency of $q ?

Erik Svedin Over a year ago

Yes in your service you must inject $q. Its built in to angular so just inject it

Erik Svedin Over a year ago

Im not sure I understand the question, for more information about angulars promise implementation see: docs.angularjs.org/api/ng/service/$q

CodeGenius Over a year ago

Hey loader is working but i ran to a problem Cannot read property 'then' of undefined at websiteService.addwebsite(formData)

Erik Svedin Over a year ago

Seems like you're not returning the promise correctly from the service then.

|

Gautam Kumar · Accepted Answer · 2016-10-13 11:26:49Z

0

    this.insertMliveResponse = function(data){
        var defer=$q.defer();
        var requestURL='/mlive-portlet/rest/mliveResponseService/insertmLiveResponse';
        httpRequest(requestURL,data).then(function(data){
                defer.resolve(data.data);
        },function(data){
            defer.reject(data.data);
        })
        return defer.promise;
    }

answered Oct 13, 2016 at 11:26

Gautam Kumar

317 bronze badges

2 Comments

Gautam Kumar Over a year ago

try to use defer.promise

CodeGenius Over a year ago

why do i need to return defer.Promise?

The Mechanic · Accepted Answer · 2016-10-13 11:31:41Z

If you are making request then, I think the best way to show hide loader is interceptor

In my snippet, I am using loader service to activate/deactivate loader

For Eg:

// http.config.js  file
export function httpConfig($httpProvider, AuthInterceptProvider) {
  'ngInject';
  AuthInterceptProvider.interceptAuth(true);

  // added for show loader
  $httpProvider.interceptors.push(function (loaderService, $q) {
    'ngInject';
    return {
      'request': function (config) {
        loaderService.switchLoaderModeOn();
        return config;
      },

      'requestError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      },

      'response': function (response) {
        loaderService.switchLoaderModeOff();
        return response;
      },

      'responseError': function (rejection) {
        loaderService.switchLoaderModeOff();
        return $q.reject(rejection);
      }
    };
  });
}

// and in your module.js file
import {httpConfig} from './config/http.config';

.config(httpConfig)

Collectives™ on Stack Overflow

Loader not being shown on ajax request in angular js

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related