Page Loading Part in Angularjs

Question

I finished the data loading part in the front-end, and also i'm trying to put the page loading part (Progress bar).But, it is not working in the correct way. I kindly request anyone to help me...

HTML

<div class="w3-col m7" ng-init="init()" ng-show="IsVisibleForm">


    <div class="w3-row-padding">
        <div ng-show="IsVisible" style="text-align:center;">
            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            <h3>Please wait</h3>
        </div> 
        <div class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>

                <br />
                <div>

                    <table class="table defaultTable" ng-show="resultTble">

                        <tr>
                            <th></th>
                            <th>Dog ID</th>
                            <th>Dog Name</th>
                            <th>Sex</th>                            
                            <th>Sire Name</th>
                            <th>Dam Name</th>
                            <th>Creater</th>
                            <th>Created Date</th>
                            <!--<th></th>-->
                            <!--<th></th>-->
                        </tr>
                        <tr ng-repeat="d in newDogList">
                            <td><a href="#/EditDog/{{d.id}}" target="_blank">$</a></td>
                            <td><a href="#">#</a></td>
                            <td><a href="#/ViewDog/{{d.id}}" target="_blank">{{d.name}}</a></td>
                            <td>{{d.gender==1 ? 'Male' : d.gender==2 ? 'Female' : 'Unknown'}}</td>
                            <td>{{d.sireName}}</td>
                            <td>{{d.damName}}</td>
                            <!--<td><a href="#/Mail">&</a></td>-->
                            <td><a href="#/Mail/{{d.createdMailId}}" target="_blank">{{d.createdUserName}}</a></td>
                            <td>{{d.createdDate}}</td>
                            <!--<td>
                                <a href="#/Edit" class="btn btn-success btn-lg" title="Edit">
                                <span style="font-size: 15px" class="glyphicon glyphicon-edit"></span></a>
                            </td>-->
                           <!-- {{d.gender==1 ? 'Male' : d.gender==2 ? 'Female' : 'Unknown'}}-->
                            <!--{{d.gender==1 ? 'Male' : 'Female' }}-->
                            <!--<td>
                                <a href="#" class="btn btn-success btn-lg" title="Delete">
                                    <span style="font-size: 15px" class="glyphicon glyphicon-remove"></span>
                                </a>
                            </td>-->
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

controller

    $scope.init = function () {
            $scope.IsVisible = true;
            $scope.IsVisibleForm = false;
            $scope.resultTble = false;
            //$scope.mail = urls.domain + "#/Mail/?createdMailId=";
    }

    var request = $http({
        method: 'GET',
        url: urls.api + 'Dog/NewDogs'

    }).success(function (data, status) {

        //console.log(data);
        //console.log(JSON.stringify(data));
        //console.log(JSON.parse(JSON.stringify(data)));

        $scope.newDogList = angular.fromJson(data);
        $scope.IsVisible = false;
        $scope.IsVisibleForm = true;
        $scope.resultTble = true;
    })
     .error(function (error) {
         $scope.status = 'Unable to load new dog list: ' + error.message;
         console.log($scope.status);
     });

Thankyou

Answer 1

Your ng-model named isVisibleForm is initialized to false which hides the entire div containing your progress bar. Shouldn't that be set ( true )?

Nit: That model seems better named as isFormVisible .

UPDATE (after your comment):

You don't need another model, one is enough.

<div class="w3-col m7" ng-init="init()">


    <div class="w3-row-padding">
        <div ng-show="IsVisible" style="text-align:center;">
            <md-progress-circular md-mode="indeterminate"></md-progress-circular>
            <h3>Please wait</h3>
        </div> 
        <div ng-hide="IsVisible" class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>
.
.

Answer 2

The issue is that, the progress-bar is inside the main hiding div .

Current scenario:

If,

IsVisibleForm -- hides --> progress-bar -- hides

IsVisibleForm -- show --> progress-bar -- show

The above happens because progress-bar is the child of IsVisibleForm

Solution:

Move the progress-bar out of the IsVisibleForm div.

Since you have taken the progress-bar inside the main div the logic which you have used inside the init() function is not working.

<div ng-show="IsVisible" style="text-align:center;" ng-init="init()">
    <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    <h3>Please wait</h3>
</div> 

<div class="w3-col m7" ng-init="init()" ng-show="IsVisibleForm">
    <div class="w3-row-padding">
        <div class="w3-col m12">
            <div>
                <h2><b>New Dogs</b></h2>

                <br />
                <div>

                    <table class="table defaultTable" ng-show="resultTble">
                        ...
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

$http request is asynchronous you should use like this

$scope.$apply(function(){
    $scope.isLoading = false;
});

And as whole like this

<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>

And in your JS

$scope.isLoading = true;

$http.get("/posts")
   .success(function (data) {
         $scope.$apply(function(){
           $scope.isLoading = false;
         });
   });