Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS An Introduction to Two-Way Data Binding What is two-way data binding?

Chris Kwong
Chris Kwong
10,266 Points

How to prevent incomplete data from loading when using AngularJS

In the video, and in my own testing. Whenever the page is refreshed, for the initial half a second, we see the "Hello {{user.name}}" presented and then fixed as the javascript is loaded.

To try to fix this problem, I tried using jquery to only run the app.js when document is ready using $(function){//app.js code here}) , but it ran into an error.

How can I fix it so that on refresh, the user doesn't see Hello {{user.name}} before the angular js is loaded?

1 Answer

28,736 Points

I think that what you need is the ngCloak directive.

From the angular documentation:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.