ng-include 和 ng-view 未同时加载

Question

below is the structure of my app. very simple. header and footer are very small files. while the ng-view on homepage is much bigger. I noticed that when i enter the page. the two ng-include get loaded first, then the ng-view come up and footer get pushed to the bottom. the footer flashes for like 0.1 sec, but it's in a different color. so it is quite clear to me.

    <div ng-include='"app/core/templates/header.html"'></div>
    <div ng-view autoscroll="true"></div>
    <div ng-include='"app/core/templates/footer.html"'></div>

Is there anyway to have them finish loading at the same time. and display all together? or anyway to make it more smooth?

Answer 1

There is ng-cloak in angular you can show other div until loading finishes In cases where you are loading angular.js in the body or templates aren't compiled soon enough, use the ng-cloak directive and include the following in your CSS:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}