Angular expressions are crucial while developing Angular application.
Sometimes, while working with them, you may see double curlies
which are actually displayed on page, while it is loading.
Common scenario are titles, headings and different flash messages,
which contain Angular expressions, but which are not always rendered 'on time'.
e.g.
Welcome back, {{user.name}}
There are several ways to prevent user from seeing those:
- ng-bind directive. Since this is attribute inside
HTML tag, it will not be rendered, and thus, it will be hidden for user.
Once page is loaded, Angular will replace it with actual value evaluated
upon expression. You should use this for HTML blocks that are visible to user
before Angular compiles it.
- ng-bind-template. It is similar to ng-bind, only that it allows HTML tags and
multiple expressions to be used inside it and it. Also, some of the HTML tags, doesn't support
tags for example, so you're forced to use whole HTML template (like tag),
not just expression that you want to evaluate.
- ng-cloak. This directive works in cooperation with CSS rule, embedded in Angular.
It also prevents the Angular html template from being briefly displayed
while your application is loading