How to show some HTML until screen is loaded in Angular / Ionic?

Question

I am using Ionic and I can't find the solution for my problem. What I want to do, is to show some HTML before the screen is loaded. You can use the default $ionicLoading, but that just gives me an overlay, while I don't want that. I am a newbie to Angular and Ionic, so it might be a very simple question, but I just can't solve it.

To do so, I have added HTML to the screen I wanted it to be added. I made it like this:

<div class="preload-wrapper" ng-show="removeAfterLoad">
  <p>Please wait, the page is being loaded </p>
</div>

And I know I need to use this, but I don't know how to bind it to the HTML I am using.

  $ionicPlatform.ready(function removeAfterLoad () {
         // I need to make sure that the HTML is only shown while the screen is being loaded.
         // After it is loaded, I want to remove the HTML.

    });

Is it something like $scope.hide I need to use. If so, how do I bind that to my HTML snippet?

score 0 · Answer 1 · edited May 23 '17 at 12:08

I would recommend using ng-cloak

adding ng-cloak to a tag will hide it until the page is fulling loaded, and can be used in the inverse manner.

Step 1

Add this style between your <head> tag.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

[ng-cloak].loading {
    margin-top: 150px;
    text-align: center;
    display: block !important;
}
.loading {
    display: none;
}

Step 2:

Add this to your index.html

<div class="loading" ng-cloak>
        <i class="fa fa-spinner  fa-pulse fa-3x fa-fw"></i>
        <span class="sr-only">Loading...</span>
 </div> 

<div class="container" ng-cloak>
.....content goes here
</div>

After the page has fully loaded, ng-cloak will add "hidden" to the loading div and display the container div.

Thanks Taylor, but it doesn't work. It doesn't show the "loading" at all when the screen is loading. Instead, it's invisible by default.. — Siyah, Jan 04 '17 at 19:37

Hiraqui · Answer 2 · 2017-01-05T14:02:15.430

You can actually override $ionicLoading template/overlay with your own html code. Here are the docs: http://ionicframework.com/docs/api/service/$ionicLoading/

You can even override the default template for any view.

In your example you could do:

angular.module('LoadingApp', ['ionic'])
    .controller('LoadingCtrl', function($scope, $ionicLoading) {
      $scope.show = function() {
        $ionicLoading.show({
          template: '<div class="preload-wrapper" ng-show="removeAfterLoad"> '+
                        '<p>Please wait, the page is being loaded </p> '+
                    '</div>',
          duration: 3000,
          //if you want to hide the background overlay
          noBackdrop: true 

        }).then(function(){
           console.log("The loading indicator is now displaying your html");
        });
      };
      $scope.hide = function(){
        $ionicLoading.hide().then(function(){
           console.log("The loading indicator is now hidden");
        });
      };
});

An nice way to show and hide loading is using ionic view events: http://ionicframework.com/docs/api/directive/ionView/

$scope.$on("$ionicView.beforeLeave", function(event, data){
   // show loading
});

$scope.$on("$ionicView.beforeEnter", function(event, data){
   // hide loading
});

Yes, but did you read my text? I don't want to use IonicLoading, because it gives me an overlay... I want to get rid of the overlay. — Siyah, Jan 05 '17 at 12:24
Well i don´t fully understand what you mean by overlay. If you want to meove the black/grey background just use noBackdrop: true on the loading option like stated in the docs. And anyways you can use css to make your html take the whole screen, change the background overlay color or transparency, etc. — Hiraqui, Jan 05 '17 at 12:31

score 0 · Answer 3 · answered Jan 05 '17 at 10:34

0

It's Actually Quiet Simple:

Inside Your Controller, you need to add $ionicLoading as below -

 $ionicLoading.show({
        template: '<ion-spinner></ion-spinner> <br/> Please wait, the page is being loaded'
    });

And Hide after the function is successfully Callback:

$ionicLoading.hide();

answered Jan 05 '17 at 10:34

Abhishek Agarwalla

322
4
16

Yes, but did you read my text? I don't want to use IonicLoading, because it gives me an overlay... I want to get rid of the overlay. – Siyah Jan 05 '17 at 12:24

How to show some HTML until screen is loaded in Angular / Ionic?

3 Answers3