Menu
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?
716
This tutorial worked for me: http://www.ng-newsletter.com/advent2013/#!/day/21
Here is a plunker: http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview
ng-cloak attributeng-cloak attributeMarkup:
<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;
}
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
