Is there a way to avoid AngularJS showing all hidden elements before the page loads?

Question

All elements with the ng-hide attribute are visible until the page loads (and angular hide them) - before that it will look strange. With jquery, I used to set style="display:none" and showed them when js is executed.

Am I doing something wrong in AngularJS ? Or is there a better way to solve this?

Thanks a lot!

An example of a page displaying all hidden elements upon loading:

Answer 1

Thanks for all the great answers.

ng-cloak does the trick:

• Documentation: link
• Step-by-step setup guide: link

Recalling this recommendation:

The directive can be applied to an element, but the preferred application is to apply several ngCloak directives to small parts of the page to provide a progressive visualization of the browser view.

Answer 2

Just try

 <div ng-app ng-cloak> //Code </div> 

Docs https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 3

Take a look at ng-cloak

https://docs.angularjs.org/api/ng/directive/ngCloak

This will prevent this flicker.

Answer 4

check this white paper https://docs.angularjs.org/api/ng/directive/ngCloak add this directive to your body tag using special css included in the beginning or in html directly