Angular overlay (spinner) when we have multiple request

Question

I have below HTML panel and binds to the controller, in the controller I have 4 calls to server to get my data, my question is how can I show spinner or overlay on top of this panel until all the requests to the server are resolved and I can show the data smoothly.

<div class="container-fluid margin10 padding10 myPanel">
    <div class="row-fluid name" ng-bind-html="viewData.msg.name"></div>
    <div class="row">
        <div class="col-md-11">
            <div ng-bind-html="'&bull; ' + (viewData.msg.filtersStr | limitTo: 140) + (viewData.msg.filtersStr.length > 140 ? '...' : '')" ng-attr-title="{{viewData.msg.filtersTooltipStr}}"></div>
        </div>        
    </div>

    <div class="row top-buffer-margin">
        <div class="col-md-4 text-right">
            <div class="col-md-8"><span class="font10" translate="msgs.details.confidence"></span>:</div>
            <span ng-bind-html="viewData.msg.severity" ng-class="viewData.msg.severityColor" class="font10 col-md-4 confidence-span"></span>
        </div>
    </div>

    <hr>
    <table class="table-striped col-md-12 top-buffer-margin">
        <thead>
        <tr>
            <th class="col-md-3"></th>
            <th class="col-md-2 text-center" ng-bind-html="'<i>' + ('msgs.details.countColHead' | translate) + '<i>'"></th>
            <th class="col-md-4 text-center" ng-bind-html="'<i>' + ('msgs.details.dynamicCalculation' | translate) + '<i>'"></th>
            <th class="col-md-3 text-right" ng-bind-html="'<i>' + ('msgs.details.CalculationColHead' | translate) + '<i>'"></th>
        </tr>
        </thead>
        <tbody>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number1"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number1.dynamicCount "></span>               
            </td>
            <td class="col-md-4 text-center" >
                <span ng-bind="viewData.msg.number1.dynamicCalculation "></span>

            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewData.msg.number1.percentageCalculation > 0 ? '+' : '') + viewData.msg.number1.percentageCalculation + '%'">
            </td>
        </tr>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number2"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number2.dynamicCount "></span>                
            </td>
            <td class="col-md-4 text-center">
                <span ng-bind="viewData.msg.number2.dynamicCalculation "></span>
            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewData.msg.number2.percentageCalculation > 0 ? '+' : '') + viewData.msg.number2.percentageCalculation + '%'">
            </td>
        </tr>
        <tr class="">
            <td class="col-md-3">                
                <div><span translate="msgs.details.number3"></span></div>
            </td>
            <td class="col-md-2 text-center">
                <span ng-bind="viewData.msg.number3.dynamicCount "></span>

            </td>
            <td class="col-md-4 text-center">
                <span ng-bind="viewData.msg.number3.dynamicCalculation "></span>               
            </td>
            <td class="col-md-3 text-right"
                ng-bind="(viewata.msg.number3.percentageCalculation > 0 ? '+' : '') + viewData.msg.number3.percentageCalculation + '%'">
            </td>
        </tr>
        </tbody>
    </table>   
</div>

The controller is like this:

(function() {
    'use strict';

    angular.module('myApp')
        .controller('myController', myController);

    /** @ngInject */
    function myController($scope, BinsResource, msgEvents, appConstants) {

        var msg = null;
        $scope.viewData = {msg: {}};

        var init = function() {


        }


        var getMsgDetails = function() {


            msg = $scope.selectedMsg;
            //
            $scope.viewData.msg = {
                ruleName: msg.ruleName,
                date: moment.utc(msg.time).format('YYYY-MM-DD'),
                time: moment.utc(msg.time).format('HH:mm'),
                severity: msg.severity,
                severityColor: msgsService.getSeverityClassColor(msg.severity, appConstants),
                number1: buildEventsData(msg, appConstants.measureType.number1),
                number2: buildEventsData(msg, appConstants.measureType.number2),
                number3: buildEventsData(msg, appConstants.measureType.number3)         
            };

            var params = prepareDataForBinsHttp(msg);

            //number1
            BinsResource.post('number1', params).then(
                function(response) {

                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number1.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number1.dynamicCount = calculationObject.count;

                },
                function(error) {
                    //TODO : Display callback error
                }
            );

            //number2
            BinsResource.post('number2', params).then(
                function(response) {

                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number2.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number2.dynamicCount = calculationObject.count;
                },
                function(error) {
                    //TODO : Display callback error
                }
            );

            //number3
            BinsResource.post('number3', params).then(
                function(response) {
                    var calculationObject = calculateCalculation(response.data.Interval, msg);
                    $scope.viewData.msg.number3.dynamicCalculation = calculationObject.calculation;                    
                    $scope.viewData.msg.number3.dynamicCount = calculationObject.count;
                },
                function(error) {
                    //TODO : Display callback error
                }
            );

        }

        //
        $scope.subscribe(msgEvents.message._ALERT_ITEM_SELECTED_, function(selectedMsg){

            $scope.selectedMsg = selectedMsg;

            if(selectedMsg != null){
                getMsgDetails();
            }
        });

        init();
    };

})();

I want my HTML be blocked until getMsgDetails() does all its calls to server and calculation and was ready to populate the HTML, how can I do this?

Answer 1

I think your best option, is to use the following angular library

https://github.com/McNull/angular-block-ui

It will display a spinner, or a loading message, until all the promises are solved (it is configurable as well)

Demo here: http://angular-block-ui.nullest.com/#!/