I am developing some simple angularjs SPA and I have noticed that at the start, for less than a seconds, in the SPA are displayed many {{ ... }} before angularjs load the data.
How could I avoid this behaviour ?
How avoid to show {{ ... }} at the start?
137 Views Asked by xRobot At
5
There are 5 best solutions below
0
On
don't data-bind inside of an element. use an attribute. the ng-bind attribute is what you're looking for.
So...
<h1>{{ your.data }}</h1>
will become
<h1 ng-bind="your.data"></h1>
ng-cloak works as well, but it's good to know about both.
1
On
Basically the content show as
{{}}are interpolation directive which are nothing but angular un-compiled data.
You could use ng-cloak directive on your body that will have display: none !important CSS, you could use this directive as class or attribute with which you need to add the CSS rule given below.
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Alternative
Use ng-bind directive that will evaluate the expression inside the scope of the current controller.
0
On
Use ng-bind
It is preferable to use ngBind instead of {{ variable }}, This will avoid {{}} momentarily displayed by the browser. People use {{ variable }} because it is less verbose and more readable.
<div>
<div ng-bind="name"></div>
</div>
Besides ng-bind you can also use ng-Cloak. Here is the documentation
Use
ng-cloakFrom the website
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.
And with the CSS styles