HTML code appears when navigating from one page to another in angular js

Question

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?

can use resolve in route config to load data , until resolved new templates/controllers won't load — charlietfl
– charlietfl, Commented Nov 18, 2013 at 15:03
Thank you for the comments... :) I will try them out then... — user746458
– user746458, Commented Nov 18, 2013 at 15:06
resolve solved the problem...thank you for the suggestion :) — user746458
– user746458, Commented Nov 20, 2013 at 11:37

dimirc · Accepted Answer · 2013-11-18 15:34:32Z

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>

answered Nov 18, 2013 at 15:34

dimirc

6,7853 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:19:12Z

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Nov 18, 2013 at 15:30

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

2 Comments

user746458 Over a year ago

I used the above code but its not working. Regarding resolve, I am using stateProvider. Can resolve be used in stateProvider?

user746458 Over a year ago

Ya...ui-router and resolve did that... :) thank you for helping me out... :)

Collectives™ on Stack Overflow

HTML code appears when navigating from one page to another in angular js

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related