Using Angular’s `ng-bind` to Eliminate Pre-render Flickering On Your Index

Angular’s double-curly-bracket notation is super-easy. Nay, elegant. It’s a great, straightforward way to demonstrate the power of data-binding in templates.

But… there’s a drawback: until Angular has a chance to process those expressions, bind to them, and update, your users will see the brackets and the expression within them, rather than the content that should be there. This isn’t a problem with subsidiary templates that Angular is loading for you, because Angular is able to perform all the bindings before the template is rendered. But with your index.html page, things are different, and you see some ugly stuff before Angular kicks in.

Fortunately, there’s an easy solution: Angular’s `ng-bind` rides to the rescue. Simply use `ng-bind` as the attribute of an element, and make your expression into that attribute’s value. eg., instead of…

<h1>{{model.header.title}}</h1>

… just use instead:

<h1 ng-bind="model.header.title"></h1>

Should you have other text inside of your main element, just use an inline element like a <span> to attach the attribute to. That’s it. Once you know about it, `ng-bind` is very nearly as easy to use as double-curly-brackets, and you get better, flicker-free results for your user.

Advertisements

One thought on “Using Angular’s `ng-bind` to Eliminate Pre-render Flickering On Your Index

  1. adfg says:

    ng-cloak

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: