The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

405294 (1) [Avatar] Offline
#1


long time back i developed a busy indicator by jquery and it works well. we can show when i want and also can hide too.

the same functionality i like to develop in angular without using jquery. please have a look my fiddle https://jsfiddle.net/tridip/xvqbrse7/ and run then can understand what i like to develop with angular. i am new in angular and that is why no idea is coming to my mind that how could i develop this what i developed with jquery.
jquery code for busy box

<input id = "btnShow" type="submit" value="Show"/>
<input id = "btnHide" type="submit" value="Hide"/>

$(document).ready(function() {
       var loadImgPath = "http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-1.gif";

    $("#btnShow").click(function(){
        $.busyToggle('BusyBox', loadImgPath, 0, 1, 500, 0, function () {
            //alert('div visible'); 
        });
        return false;
    }); 

    $("#btnHide").click(function(){
                $.busyToggle('BusyBox', loadImgPath, -90, 0, 500, 0, function () {
                    //alert('div hide') 
                });
        return false;
    }); 
});

    //this exists routine will check the element exist on page
    jQuery.fn.exists = function () { return this.length > 0; }

    //this exists busyToggle will show busy images at bottom center on page
    $.busyToggle = function (selector, ImgLoadSrc, marginBottom, opacity, speed, easing, callback) {

        var oDiv = $("<div id='" + selector + "'><img src='" + ImgLoadSrc + "'  alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
        if ($("#BusyBox").exists() == false) {
            oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
            oDiv.css("border-top-left-radius", "5px");
            oDiv.css("border-top-right-radius", "5px");
            oDiv.css("bottom", "0px");
            oDiv.css("font-size", "0.8em");
            oDiv.css("font-style", "normal");
            oDiv.css("font-weight", "normal");
            oDiv.css("left", "50%");
            oDiv.css("margin-left", "-45px");
            oDiv.css("padding-top", "20px");
            oDiv.css("position", "fixed");
            oDiv.css("text-align", "center");
            oDiv.css("width", "90px");
            oDiv.css("height", "50px");
            oDiv.css("background-repeat", "no-repeat");
            oDiv.css("background-position", "center center");
            oDiv.css("border", "1px solid #ccc");
            oDiv.css("margin-bottom", "-(90px");
            oDiv.data('IsUp', 1)
            oDiv.appendTo('body');
        }

        if (oDiv.data('IsUp') == 1) {
            oDiv.data('IsUp', 0);
            return $("#BusyBox").stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed, complete: callback });
        }
        else {
            oDiv.data('IsUp', 1);
            return $("#BusyBox").stop(true).animate({ marginBottom: marginBottom, opacity: opacity }, { queue: false, duration: speed, complete: callback });
        }
    };


if possible please see my above jquery code and guide me how to develop same output with angular. thanks