0

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?

Feifan Lu
  • 43
  • 8
  • Check this if it can help you http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded – Ali Adravi Oct 07 '15 at 12:42

1 Answers1

0

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;
}
Arun
  • 1,177
  • 9
  • 15
  • Hi, could you please have a look at this: https://stackoverflow.com/questions/55503088/angularjs-footer-in-or-outside-ng-view?noredirect=1#comment97713444_55503088 I created a post with the same problem, but this approach is not working for me and I don´t know what am I missing. – Rober Apr 05 '19 at 06:44