Creating a splash screen using ng-cloak

Question

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

Answer 1

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

Answer 2

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;
}