Clever Geek Handbook

Download Angular Spinner by http request

I am trying to use Angular Spin Kit in my project to load a spinner for each http GET, PUT, POST and DELETE method. Here's a fiddle for the Angular Spin Kit.

Angular Spin Set

<circle-spinner></circle-spinner>

How can I connect this counter with my controller code so that when the http call is called I can load this counter in my view. thank

+3


source to share


2 answers


you can use a variable $scope

to detect the progress of the ajax request. based on this variable you can show or hide the spinner

 $scope.sendAjax = function() {
    $scope.prograssing = true;                // show spinner
    $http.get('data.json').then(function() {
      //sucess
      $scope.prograssing = false;          // hide spinner when success ajax
    } , function() {
      //error
      $scope.prograssing = false;        // hide spinner when unsuccessful ajax
    });
 }


plunker works here

+6


source


First of all you need to follow these instructions on how to install angular-spinkit in your project.

Second, see this Plnkr for how I managed to use angular spinkit for GET calls.

These are the main steps:



  • Insert your directive <circle-spinner></circle-spinner>

    into the code, but make it invisible with the ng-show

    following:

    <circle-spinner ng-show="showSpinner"></circle-spinner>

    showSpinner

    is the $ scope variable that we introduce as false

    , since we don't want the spinning circle to be shown until we make a call $http

    .

  • Make your GET call using angular service $http

    . Use a function for this. When you call a function, the first thing to do is set the variable $scope.showSpinner

    to true

    so that your counter is visible. Then you call the call $http

    .

  • The next step is to process the GET response. When the call is complete (you have success or error parameters), you must tell the variable $scope.showSpinner

    to false, which means that the directive ng-show

    from the directive <circle-spinner>

    will become false so that the circle is no longer displayed.

In short, you are showing an invisible spinning circle, you are making a call $http

that makes it visible; when the response is returned, the circle is no longer visible.

+2


source






More articles:


All Articles