AngularProgress

Display progress of an HTTP action using AngularJS. Use it for spinners, progress-messages, success messages.

Installation

There are two ways to use AngularProgress

Javascript

Download Javascript

Ruby gem

Add this line to your application's Gemfile:

gem 'angular_progress'

And then execute:

$ bundle

And then add this to your application.js in your Rails 3.1+ Application

//= require angular_http_progress

Or install it yourself as:

$ gem install angular_progress

Usage

When calling $http methods in angular, use the requestName as a property for the data argument. $http Angular Documentation

Use the requestName as value of the http-progress attribute to tie it all together. Multiple directives can listen to the same requestName at the same time.

Sample: Button with pending & success message

Sample: Button with pending & error message

Sample: Pending & Success message

Markup

    <div ng-controller="SampleController">
        <a  http-angular="sampleHttpRequest" class="btn btn-default" ng-click="startRequest()"
            http-pending="Saving..."
            http-success="Saved Successfully"
            http-error="Uh oh...">
         Save
        </div>
    </div>

Javascript

angular.module('SampleApp', ['AngularProgress']);

angular.module('SampleApp').controller('SampleController', [
'$http', '$scope', function($http, $scope) {
    $scope.startRequest = function() {
        $http.post('/my/endpoint', {
            param1: 'value1'
        }, {
            requestName: 'sampleHttpRequest'
        });
    };
    }
]);

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request