0

I have designed a small angular js based application. In that, whenever I navigate from one HTML page to another, I sometimes see HTML code of the new page being loaded for 1 or 2 seconds before that page renders completely. Like if the new page is coded like :

  Name : {{personBean.name}}
  Address: {{personBean.address}}

I am able to see the above code for few seconds before the page renders properly as it is suppose to be :

 Name : Abhinav
 Address : ABC, ...

This is happening in almost every scenario. Every page has its controller where logic of that page is coded in javascript (the way Angular works). It seems that the logic takes more time in execution while DOM gets already loaded and so HTML code sometimes gets displayed.

Can anyone please tell me how to overcome such issues? Can I make sure to get DOM loaded only after complete execution of the code present in the controller?

user746458
  • 369
  • 2
  • 13
  • 26

2 Answers2

4

You could use ngBind

It is preferrable to use ngBind instead of {{ expression }} when a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading. An alternative solution to this problem would be using the ngCloak directive.

<span ng-bind="personBean.name"></span>
<span ng-bind="personBean.address"></span>
dimirc
  • 6,347
  • 3
  • 23
  • 34
2

In your main home file (I'm guessing index.html) you want to use ng-bind instead of {{...}}. Alternatively, you could add ng-cloak to your body and

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

to your CSS. This is for when the page first loads.

To get rid of the flicker when navigating between pages, best to use resolve see Delaying AngularJS route change until model loaded to prevent flicker

Community
  • 1
  • 1
NicolasMoise
  • 7,261
  • 10
  • 44
  • 65