javascript - Spinner in Angular.js -


i want use spinner can show during of rest api calls better ux. have come across many existing github projects similar things.

https://github.com/cgross/angular-busy
https://github.com/urish/angular-spinner

but i'm not able use of existing projects. think before start writing of own, want know if things i'm looking can done using these projects or other existing project.

requirement:

  1. during of rest api calls uploading images, fetching data, deleting images, etc, want show spinner background faded. once have result, can show background again , remove spinner.
  2. i want use spinner start/stop controller not html.
  3. i don't want spinner xhr requests default.

i think angular-busy demo solves of above requirements except needs promise param in html. there anyway can control start/stop dynamically controller rather giving promise.

angular-spinner demo doesn't fade out background. there way fade out background ?

can give me pointers how can solve problem ?

i create own spinner logic:

js:

app.directive('ngspinnerbar', ['$rootscope',     function ($rootscope) {         return {             link: function (scope, element, attrs) {                 // defult hide spinner bar                 element.addclass('hide');                   // count how many time requests sent server                 // when done spinner removed                 scope.counter = 0;                  $rootscope.$on('$statenetworkrequeststarted', function () {                     scope.counter++;                     element.removeclass('hide'); // show spinner bar                     //  $('body').addclass('page-on-load');                 });                  $rootscope.$on('$statenetworkrequestended', function () {                     scope.counter--;                     if (scope.counter <= 0) {                         scope.counter = 0;                         element.addclass('hide'); // show spinner bar                         //  $('body').removeclass('page-on-load'); // remove page loading indicator                     }                  });              }         };     } ])

html:

<div ng-spinner-bar></div>

as can see every time send request api show spinner (css create spinning - link) , when result come send event hide spinner.

if want make things easier you, should create service send api requests (wrap $http). way can ensure every request show spinner.

edit

the first result in google gave me this - fade background in angular


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more