CODEWITHSUNDEEP
javascriptangularjs
freedom
freedom

Reputation: 225

Ajax spinners for angularJS

I am trying to show ajax spinners on one of angularJS application with every http call, so it means whenever we try to load a ngGrid or Dropdown etc there will be a spinner on place and when loading get complete it will get removed, I am new on angular not sure how can we achieve it, please give any reference.

Thanks

Upvotes: 0

Views: 117

Answers (2)

ruedamanuel
ruedamanuel

Reputation: 1930

Try using an ngSwitch, where you will swap two templates, so basically it would be something like this:

<div ng-switch on="loaded">
  <div ng-switch-when="true">
      <!--your loaded content goes here-->
  </div>
  <div ng-switch-default>
      <!--your spinner goes here-->
  </div>
</div>

That way in your controller you can do something like:

$scope.loadSomething = function(){
    $scope.loaded = false;
    $http.get(url).success(function(data){
        $scope.loaded = true;
    });
};

Upvotes: 1

Greg Burghardt
Greg Burghardt

Reputation: 18888

You could write some plain old JavaScript to add a class name to the DIV or TABLE before the call to $http.foo, and then in a success/failure callback remove that class name.

CSS:

.loading {
    background: transparent url(path/to/loading.gif) no-repeat scroll 50% 50%;
}

.loading * {
    visibility: hidden;
}

Upvotes: 0

Related Questions