10

I'm trying to create a splash screen using AngularJS as described in this talk on the AngularJS youtube channel: http://youtu.be/xOAG7Ab_Oz0?t=10m20s

It uses the ng-cloak directive. Here's the HTML:

<head><head>
<body ng-app>
  <!-- inline styles -->
  <div class="splash" ng-cloak="">
    <p>Loading</p>
  </div>
  <!-- Rest of app -->
</body>

And the CSS:

[ng-cloak].splash {
    display: block !important;
}
[ng-cloak] {
    display: none;
}
.splash {
    background-color: #428bca;
}

Here is a fiddle: http://jsfiddle.net/TimFogarty/LaBvW/2/

In the fiddle, the splash div does not disappear as the talk said it would. Is there something wrong with this code? Have I made a mistake? How can I implement this splash screen?

Ashley Medway
  • 7,151
  • 7
  • 49
  • 71
tfogo
  • 1,416
  • 1
  • 14
  • 23
  • This method is also described here: http://www.ng-newsletter.com/advent2013/#!/day/21 Following this led to the same problem. (In fact there was an error in the code on this site. `id="spalsh"` should have been `class="splash"` but this did not fix my main problem.) – tfogo Jan 22 '14 at 22:11

2 Answers2

10

This tutorial worked for me: http://www.ng-newsletter.com/advent2013/#!/day/21

Here is a plunker: http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview

Note some things:

  • In the demo I'm manually bootstrapping angular to simulate loading.
  • The splash screen markup should have ng-cloak attribute
  • The rest of the template should have ng-cloak attribute

Markup:

<div class="splash" ng-cloak="">
    <p>Loading</p>
</div>

<div ng-cloak="">    
    <h1> app loaded </h1>
</div>

Css:

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}
Community
  • 1
  • 1
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • Thanks, good points. Having `.splash { display: none }` fixed it for me. – tfogo Jan 22 '14 at 23:08
  • 1
    sometimes ng-cloak is not enogh - I found that sometimes my controllers are not initialized yet even when ng-cloak has completed, and the if I have a form on screen and user starts typing in, a controller gets loaded and clears the data away because model is null. It happens rarely, but still often enough to get annoyed when form fields get cleared out. Therefore I'm using a custom model property `isLoaded` on my main controller to see if the loading is really done. – JustAMartin Sep 24 '15 at 12:11
7

The second css selector which was:

[ng-cloak] {
    display: none;
}

should be

.splash {
    display: none;
}

because angular will remove the ng-cloak class when the app is bootstrapped

Gruff Bunny
  • 27,738
  • 10
  • 72
  • 59