I want to use angular-busy loader for a time of 5 successive requests , can i use it ?? then how??
(or)
can i include multiple promises at a time?

After upgrading from angular-busy 4.1.0 to 4.1.1 (while still depending on angular 1.2.26), we get the following error on pages where angular-busy is used:

Error: cgBusy expects a promise (or something that has a .promise or .$promise 
addPromiseLikeThing@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:69:17 tracker.reset/<@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:22:17 forEach@http://localhost:9000/bower_components/angular/angular.js:325:9 tracker.reset@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:18:13 .link/<@http://localhost:9000/bower_components/angular-busy/dist/angular-busy.js:188:29 $watchCollectionAction@http://localhost:9000/bower_components/angular/angular.js:12412:13 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9000/bower_components/angular/angular.js:12541:23 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:9000/bower_components/angular/angular.js:12806:13 ngEventHandler/<@http://localhost:9000/bower_components/angular/angular.js:19141:17 jQuery.event.dispatch@http://localhost:9000/bower_components/jquery/jquery.js:4676:1 jQuery.event.add/elemData.handle@http://localhost:9000/bower_components/jquery/jquery.js:4360:1

We didn't get this error with 4.1.0, so 4.1.1 doesn't seem backwards compatible to me :)
I think we're getting this error because when we use cg-busy="myPromise", myPromise is often still undefined at page load (it only gets initialized when we click some button). But then again, this did work before the upgrade.

E.g. try to set the minDuration property in the demo.

Similar to http://chieffancypants.github.io/angular-loading-bar/
The reason: loading data will feel faster

Hi,

I am not quite sure if I properly understood the usage of minDuration and delay.

My configuration (cgBusyDefaults):

{
  minDuration : 700,
  delay : 300
}

What I would like to achieve: only show the busy indicator if the promise takes longer than 300ms to resolve, and then show it at least for 700ms. But in my application, the busy indicator is always shown after the given delay, even if the tracked promise resolves much faster than the delay. Even if I change delay to some really high value like 2 seconds, the busy indicator is just shown after this amount of time...

Version used: angular-busy 4.1.1 and AngularJS 1.2.16.

Thanks for any hints!

Hi, nice directive. It would be more useful if we can specify some routes (via regex ?) for which the loading indicator should not come.

Thanks.

Hello,

I`m having problems with cgBusy on IE9 with the loader since it doesn't work at all.

From what I understand, IE legacy browsers have problems with ng-show and ng-hide so the workarround is using ng-if. Can you please confirm if the library is working on IE9?

Thank you

I've just discovered angular busy and have fallen in love with it. I'm adding it on buttons, forms, tabs... everywhere hehe. The combination of ng-show="something.$resolved" and cg-busy="something.$promise" has made my day.

The only issue I am currently facing is when I am on a view with ng-busy that is displaying content that resulted from the same promise that is bound on ng-busy. When I try to refresh the data ng-busy sees the promise and shows up the loading sign (as it should). But since I have data showing, I'd like to allow the user to keep seeing them and show the loading somewhere else.

To do so it would require something like cg-busy-unless="something.length>0" so cg-busy doesn't get triggered if length>0. This way I could have 2 cg-busy divs, one for when there is no content (length=0) and one for when there is (length>0).

I am pretty sure there are more things that this could be used for.

ps. Thank you for your amazing work. This is my new favorite ng module! :)

Hi,
maybe trivial but a question, if my http goes wrong, how to hide loader?
If http goes wrong (malformed json or something), the indicator continue spinning. I hide it with jquery but is sure is not the best way.
Thanks.

$http.get('http://localhost:8080/test.php', { tracker: 'my_tracker' }).success(function(data) {
//SOMETHING
}).error(function(data, status, headers, config) {
// HIDE INDICATOR??
//SOMETHING ELSE

} );

}

Hi,

just a quick question: do you see any chance to use angular-busy in the way that for example Ladda or this proof of concept do work? Specifically, I would like to modify (disable and add a spinner) the element that triggers the action (HTTP request or similar), for example a button, instead of overlaying some parts of the UI with a new layer.

Thanks and greets,
Jan.

Hello,
I have a table loaded dynamically and its rows can be expanded with AJAX calls on user clicks. I'd like to show spinner while these secondary data is loaded. But I cannot use one promise variable for that since it shows the spinner in all rows. So I've tried to create the promise variables on the fly when the parent table is loaded. But when I try to access the dynamic variables I'm getting the error in the subject. How could I work around this?
html:

<div ng-repeat="link in table">
  <div ng-click="loadRow(link)">
    <div cg-busy="'p'+link.fromId+'-'+link.toId"></div>
  </div>
</div>

js:

$scope.loadRow(link){
  $scope['p'+link.fromId+'-'+link.toId] = $http.get('...');
}

Q is quite a popular library on promise. I find it easier to code angular with promises wrapped into Q. Angular-busy support .then in general, however seems if that is Q promise it is not supported.

Now I would need to use a workaround to wrap Q back into $q promise

Since the deprecation of automatic promise unwrapping in 1.2+, it would be nice to be able to name a promise, that you could get a factory from adding it, and you create a new promise everytime you want, but keep track of only one instance.

Use case:

Every time you press a button, you'll execute the same promise. Since promises can only be either resolved, pending or rejected, you can have only one instance. So, in your module.run, you add a couple of named promises that you expect to use thorough your app:

angular.module('myapp', ['cgBusy'])
.run(['_cgBusyTrackerFactory', '$q', function(_cgBusyTrackerFactory, $q){
  _cgBusyTrackerFactory.add('myPromise', function promiseFactory(originalPromise){
     if (!originalPromise) {
        originalPromise = $q.defer();
     } 
     originalPromise.promise.then(function(){
       // do something before returning it
     });
     return originalPromise;
  });
}])
.controller('myCtrl', function(_cgBusyTrackerFactory, $scope, SomeHttpService){
   $scope.stuff = function(){
     _cgBusyTrackerFactory.get('myPromise')(SomeHttpService.fetch());
   });
});

<div cg-busy="{promise:'myPromise'}" ng-click="stuff()"></div>

so you can reuse the same factory and pattern and keep it consistent application-wide.

any chance to add a bower.json package to this? Great stuff!

Hi @cgross !

Cool library =)

I just wanted to say: I noticed you've jumped the version in bower.json for angular-promise-tracker to 2.0. I just did a full release of v2.0, and it has tons of breaking changes. I basically completely removed the string ID system (which your library relies on!) to make it much more minimal. See the new API in the README.

I would recommend sticking with v1.5.x. Or perhaps building your own promise-id-tracking-system.

Check the plunker here: http://plnkr.co/edit/VO7K2eE7GmEp0UY9wmbi?p=preview

I have two promises that I want to use cg-busy="[ promise1, promise2 ]" works fine, however cg-busy="{ promise: [ promise1, promise2 ] }" gives an infdig (10+ $digest) error.

An empty message causes the spinner to show with the background (.cg-busy-default-sign) not including the entire spinner:

This is the attribute I'm currently using: cg-busy="{promise:myPromise,message:''}"

As a work-around I've added the following CSS rule: .cg-busy-default-text { min-height: 1em; }

Thanks for this library I really like the approach and the spinner functionality!

Hello,
i was using older version of angular-busy which had a dependency on angular-promise-tracker. Older version integrated nicely with angular-ui-router's resolve functionality. I just added the tracker to $http option object and that was it. Every request was tracked and busy div popped up.

The question is how to use the new version with angular-ui-router resolve. New version tracks promises added to the $scope, but as i am using ui-router's resolve functionality, resolved promises are injected to my controller. I am not creating any promises in my controller, so i cannot add them to $scope.

Thanks
L

Somebody could help me in figuring out why the following code isn't working:

scoreApp.controller('LoginController', ['$scope', '$q', '$window', 'toaster', 'UserApp', function ($scope, $q, $window, toaster, UserApp) {

    function login(redirectTo) {
        var deferred = $q.defer();
        UserApp.OAuth.getAuthorizationUrl({ provider_id: 'facebook', redirect_uri: redirectTo }, function (error, result) {
            if (error) {
                deferred.reject(error.message);
            } else {
                deferred.resolve(result.authorization_url);
            }
        });

        return deferred.promise;
    };

    $scope.loginPromise = null;
    $scope.login = function (redirectTo) {
        var promise = login(redirectTo);
        $scope.loginPromise = promise;
        promise.then(function (authorizationUrl) {
            $window.location.href = authorizationUrl;
        }, function (error) {
            toaster.pop('error', '', error);
        });
    };

}]);

 <div class="center-block" style="width:23%">
        <a href="#" class="btn btn-block btn-social btn-lg btn-facebook" ng-click="login('/#/Votacao')"><i class="fa fa-facebook"></i>Entre com o Facebook</a>
    </div>

    <div cg-busy="loginPromise"></div>

The login process works just fine. The problem is that the loading message doesn't show.

In my app I use angular 1.2.14, and the 'busy' indicator does not appear.
I tried to use the version in your demo, then it can work.

And there is not any error or something. So I don't know why it can not work.

I noticed that doing

bower install angular-busy

there's a bower_components directory in angular-busy. This results in two copies of angular and angular-animate in bower_components. Could you please exclude the bower_components directory in your bower.json?

what is the proper way to terminate the loading when an error occurs for example making an http call?

right now when assign my http call's promise to cg-busy and an error occurs it just continues to spin/load.

thanks!

With angular 1.3.0.rc.3 I get the following error:

TypeError: Cannot read property '$$state' of undefined
    at Uc.d.then (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:107:139)
    at d (file:///mnt/Partizione1/Lele/Lavoro/Github%20projects/k2hire/bower_components/angular-busy/dist/angular-busy.min.js:1:940)
    at file:///mnt/Partizione1/Lele/Lavoro/Github%20projects/k2hire/bower_components/angular-busy/dist/angular-busy.min.js:1:349
    at Object.r [as forEach] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:7:298)
    at Object.c.reset (file:///mnt/Partizione1/Lele/Lavoro/Github%20projects/k2hire/bower_components/angular-busy/dist/angular-busy.min.js:1:294)
    at file:///mnt/Partizione1/Lele/Lavoro/Github%20projects/k2hire/bower_components/angular-busy/dist/angular-busy.min.js:1:2252
    at Object.fn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:117:127)
    at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:118:250)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:121:264)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js:18:101 angular.js:10683(anonymous function) angular.js:10683(anonymous function) angular.js:7858k.$digest angular.js:13292k.$apply angular.js:13540(anonymous function) angular.js:1483e angular.js:4112d angular.js:1481ic angular.js:1501xd angular.js:1395(anonymous function) angular.js:24696j jquery.min.js:2k.fireWith jquery.min.js:2n.extend.ready jquery.min.js:2I jquery.min.js:

It works fine instead with angular 1.2.25

search.factory('Search', function($resource) {
    return {

        search: $resource('/api/search/?text=:text&sorted=:sorted', {}, {
            get: {
                method: "GET",
                isArray: true
            }
        })
    }

});

In template:

cg-busy="[promise]"

Directive:

search.directive('sort', [
    function () {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                element.bind('click', function() {
                    $scope.sorted = attrs.type;
                    $scope.searchTracks();
                });
            }
        }
    }
]);

If I call the search of the template - it works, but if the directive - no

Here is my example...

this.books = BookService.query();

How do I attach the busy property to this call ?

Thanks!

I'm using a python web framework called web2py which uses its template interpolation symbols {{ }}. Since angularjs also uses the same interpolation symbols I had to override angularjs defaults to avoid the conflicts with the web2py framework. I did something like this on my module:

myApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Which has been working fine for me.

Now I'm trying to use angular-busy. Everything seems to work fine, however, it's spitting out the spinner and the following text {$message}} (see screenshot below) rather than the actual content. I presume this has to do something with me overriding the default angularjs interpolation symbols? Is there some other configuration I must do to the cgBusy module to accept my custom interpolation symbols? I'm new to angularjs so any advice would be helpful. Thank you!

Helllo!

I would like to ask you how to use your frameworking within the factory?
Is it supported as well?

angular.module('myApp')
.factory('Form', function ($resource) {
return $resource('/api/form', {}, { //parameters default
submit: {
method: 'put',
params: {}
},
reload: {
method: 'post',
params: {}
}
});
});

Thank you!

Hi,

how does this work with $http interceptors?if you could provide some instructions or examples will be great.

Thank you

There is a way to use it through a $resource call???

Work:

angular.module('app').factory('DemoFactory', function($resource) {
    return $resource('http://httpbin.org/delay/3', {}, {
        show : {
            method : 'GET'
        }
    })
});
angular.module('app').controller('DemoCtrl', function($scope, $http, DemoFactory) {
    $scope.demo = function() {
        $scope.promise = DemoFactory.show();
    };
});

Don't work - spinner is not shown:

angular.module('app').factory('DemoFactory', function($resource) {
    return $resource('</rest/service/request/array>', {}, {
        show : {
            method : 'GET', isArray:true
        }
    })
});
angular.module('app').controller('DemoCtrl', function($scope, $http, DemoFactory) {
    $scope.demo = function() {
        $scope.promise = DemoFactory.show();
    };
});

Hi,
and thank you for the excellent work! This saved me a lot of work and duplicated code.

How would you go about adding another template to the tracker? What I would like to do is define a global template that gets displayed when my request fails for whatever reason.

Thanks,

Aloha,

FYI, I guess the syntax of promiseTracker has changed somewhat as I had to add the .register method to make things work:

                angular.forEach(options.tracker, function (tracker) {
//                  scope.$cgBusyTracker[tracker] = promiseTracker(tracker);
          scope.$cgBusyTracker[tracker] = promiseTracker.register(tracker);
                });

Could that be correct or am I not getting it right?

Thanks and great work with this project! 👍 :)

I'm trying to install this lib via bower.
In bower.json I have "angular-busy": "2.2.0" which points to the latest stable version.
Bu t when I run bower install I get an error:

> bower install
bower not-cached    git://github.com/cgross/angular-busy.git#2.2.0
bower resolve       git://github.com/cgross/angular-busy.git#2.2.0
bower ENORESTARGET  No tag found that was able to satisfy 2.2.0

The solution is very simple - bower expects that we have a release tag in the repository.

$cgBusyFulfilled property should be renamed to $$cgBusyFulfilled. This way, it is stripped by $resource when sending json to the server.

Since promise wrapping has been deprecated in Angular 1.2 it makes less sense to bind promises to the template scope. I would find it easier just to pass a boolean value to cg-busy.

We're seeing inconsistent behavior when cgBusy is specified inside a modal dialog. The cgBusy template doesn't hide and stay there forever. When placing a breakpoint during the $http request, this always works fine. Seems like when the $http request is very short, this does not work. We've placed a log in the isActive function and can see that isActive is false but the cgBusy template still shows up. Was this seen before?

The template below causes conflicts when using in templates Twig, showing only the message $ message {{}}. For those using Twig templates, you must change the default delimiters AngularJS. example:

interpolateProvider.startSymbol $ ('[[');
interpolateProvider.endSymbol $ (']]');

To work, made ​​the following temporary change:

From:

have you noticed any issues with the default loading bar taking too long to disappear (min duration 0) on a mobile phone (iPhone)?

i have a page that makes a few web calls and all the data is loaded but the loading bar hangs for a few seconds before disappearing.

thanks!

Hi,

I just tried using angular-busy together with Angular 1.2.1 and I noticed that the busy-template was never shown in my case. Digging into the code, I found this comment in which you mention some problems regarding 1.2.0-rc1.

I just tried to comment out line 81–now the busy animation is shown. Maybe there have been some important changes from rc1 to the current version, so that this workaround is no longer needed?!

Thanks and greets,
Jan.

Hello,
Using cg-busy directive in div tag, it should fade/blured that whole div tag's content while the promise is running behind the scenes right. I have cg-busy running all fine in other pages in my angularjs project. But with one of the html page design, one of the input field doesn't fade when promise runs. Here is the sample code

<div class="row" cg-busy="mypromise">
  <form role="form" name="myform" ng-submit="submit()">
  <div class="row">
     <div class="form-group">
             <label for="vname">Name</label>
             <input class="form-control"  type="text" name="vname" id="vname" ng-model="vname" />
     </div>
    <div class="form-group>
           <label for="vurl">URL</label>
           <div class="input-group">
                <span class="input-group-addon">https://</span>
                <input class="form-control" type="text" name="vurl" id="vurl"  ng-  model="vurl"/>
            </div>
     </div>
</div>

<div class="row">
            <div class="col-md-4 col-md-offset-2">
                <button type="submit" ng-click="submitted=true">Button</button>
            </div>
 </div>
</form>
</div>

Everything fades away except this field

<input class="form-control" type="text" name="vurl" id="vurl"  ng-model="vurl"/>

while the promise is running. User can still type something in that box while it has to wait for promises to get resolved. Tried changing the placement of the cg-busy directive but it doesn't resolve the problem. Wondering if angular.js version matters here? Can anyone help or provide me some details related to this issue?

1. There are some problem with $http.post - its dont work. Ex : $http.post('/user/update', { id: this.user.id, tracker: 'profile-'+this.user.id})
   .success(function(data) {
   //$route.reload();
   });

if use $http.get - its work excellent!

1. Is there an example for $resource ?

Button click starts promise that puts a cg-busy on the button, but button is still clickable.

I think this is something with inline-block styling.
http://plnkr.co/edit/l7A83Yp1uWWc62VnQ9IS?p=preview

After when promise resolved , position:relative doesn't remove from element.

Hello,

I was trying to update my project to angular 1.3.0 and test if it works as before, but I found out that there is some problem with angular-busy vs angular 1.3.0. angular-busy is exhibiting very strange behavior, appears whenever it wants.

The POC can be made very easily. Just change version of angular 1.2.x to 1.3.0-build.2810+sha.adcc5a0 and angular-busy stops working as expected.

The demo is not working on IE9.

Hi @cgross, great library!

I'm running into problems, probably not understanding something. In my application I use this convention of defining factories that use $http

.factory('AFactory', ['$http', '$q', 'promiseTracker', 'canceller',
        function ($http, $q, promiseTracker, canceller) {
            return {
                getData: function () {
                    var deffered = $q.defer();

                    $http(
                        {
                            method: "GET",
                            url: '/Some/Data',
                            cache: true,
                            timeout: canceller.promise,
                            tracker: 'aTracker'
                        }).success(function (data) {
                            deffered.resolve(data);
                            promiseTracker('aTracker').cancel();
                        });
                    return deffered.promise;
                }
            };
        }]);

In this deffered scenario I have to cancel the promise tracker manually. This is not a big problem for me but I get the impression I'm doing something wrong. Am I?

Thanks