Last active
August 29, 2015 13:55
-
-
Save ndamnjanovic/8760347 to your computer and use it in GitHub Desktop.
hiding angular expressions on load
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | |
<h1> Welcome back, {{user.name}} </h1> | |
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. | |
<ANY ng-bind="{expression}"></ANY> | |
- 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 | |
<span> tags for example, so you're forced to use whole HTML template (like <title> 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment