locked
AngularJS: How to show & hide busy indicator RRS feed

  • Question

  • User264732274 posted

    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

    Tuesday, May 10, 2016 1:14 PM

Answers

  • User61956409 posted

    Hi sudip_inn,

    how can i add div to body when user click on button in angular js

    You could refer to the following code to append element to body dynamically on click event.

        var body = angular.element(document.getElementsByTagName('body'));
        var oDiv = "<div>Loading<div>";
        body.append(oDiv);
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 17, 2016 7:54 AM

All replies

  • User61956409 posted

    Hi sudip_inn,

    According to your code, we could find that you attach click event to buttons and dynamically set CSS style for element (“oDiv”) and you are using jQuery .animate() to apply an animation effect to element. If you’d like to implement same effect in AngularJS code, you could try to use ngClick directive to attach click event to buttons

    https://docs.angularjs.org/api/ng/directive/ngClick

    use ngStyle directive  to set CSS style on HTML element

    https://docs.angularjs.org/api/ng/directive/ngStyle

    and use $animate service to implement animation effect.

    https://docs.angularjs.org/guide/animations

    Best Regards,

    Fei Han

    Wednesday, May 11, 2016 5:45 AM
  • User264732274 posted

    @Fei if u see my code in action then must notice i am adding div only first time in body using jquery append

    oDiv.appendTo('body');

    now tell me how can i add div to body when user click on button in angular js. if possible show me any sample code which does the same thing.

    Wednesday, May 11, 2016 8:20 AM
  • User61956409 posted

    Hi sudip_inn,

    how can i add div to body when user click on button in angular js

    You could refer to the following code to append element to body dynamically on click event.

        var body = angular.element(document.getElementsByTagName('body'));
        var oDiv = "<div>Loading<div>";
        body.append(oDiv);
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 17, 2016 7:54 AM
  • User264732274 posted

    @Fei just one request will you show me how to write directive which will show and hide based on button click. hence i am new so things is not coming to my mind that how could i convert my above jquery code to angular directive. would u take some step to write down code and show hide with bit of animation which i did with jquery. here is jsfiddle https://jsfiddle.net/tridip/xvqbrse7/ so you can see how things works and how to develop the same with angular ?

    Tuesday, May 17, 2016 9:21 AM