hiding html until after angular loads...

[Jason Berk]

is it possible to hide my entire HTML content until after angular is loaded, and then show it.  Right now, my html shows up and is all blank and full of {{doSomething}} for a second or two...then angular loads and the dom is updated.  I'd like to just show a bootstrap alert that says "loading data...please wait" and then hide it and show the actual html in a usable "initial" state.

working on a plunk now....

[Pawel Kozlowski]

Hi!

I guess you should have a look at the ngCloak for a start:
http://stackoverflow.com/q/12866447/1418796

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>



--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Jason Berk]

ah....forgot about that....thanks!

[jmar...@gmail.com]

So, I'm actually having the same issue as described by the OP.  All of my JS files are included at the bottom of the page.  Which, in general, is considered best practice for page performance.  The problem with ng-cloak is that by the time Angular is actually loaded and is able to interpret the directive, the {{something}} has already been shown.  

The only solution I've found that works is to either A) Move all my JS files to the top of the page or B) Add a "display: none" attribute to the surrounding elements and manually show them in my bootstrap code.

I'd be interested if anyone had any other better ideas on how to approach.  The way I'm doing it feels a bit "hacky". 

[Andy Joslin]

Check out http://stackoverflow.com/questions/12866447/

[Ricardo Bin]

Instead of use {{something}} use <span ng-bind="something"></span> or <span ng-bind-template="{{something}} {{something1}}"></span> 

Works great

[Witold Szczerba]

Hi,
CSS files at the beginning and JS files at the bottom of the HTML document is the right approach.
Just add the style of display:none for ngCloack to your own CSS file and it will be applied before your browser load the rest of the page.
That way you will never get raw content of template (like {{stuff}}) displayed before AngulsrJS kicks in.

You can go even better than that! In your CSS file add some "fancy rule" to ngCloack which will override the AngularJS own display:none. "Fancy rule" - I mean like displaying some kind of "please wait" animation. It will disappear as soon as AngularJS drops that class from your document, uncovering ready to use, fully compiled application.

Regards,
Witold Szczerba
---
Sent from my mobile phone.