1

I have three views: nav, main content, footer.

Im using ui-router and when the page is loaded the nav and the footer are loaded immiditaly, but in the main content i have a request to get some data and the view delayed a one second after the nav and footer so i stuck with empty middle content to a second. How can i do that all the views will show at the same time?

<div ng-include="'client/template/nav.tpl.html'"></div>
   <div class='main-wrapper'>
    <div ui-view='' class='view'></div>
   </div>
<div ng-include="'client/template/footer.tpl.html'"></div>

main content controller:

function HomeController( $scope, promos ) {

    $scope.products = products.data; // this is come from the server directly, not ajax

  }

One thing to notice that the data that requested to main content is not from ajax request it came from server request and its global.

  • use ng-clock in body. – Ved Jan 12 '15 at 08:38
  • You may want to use 'resolve': http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker – Michael Kang Jan 12 '15 at 09:01
  • use angularjs block-ui module in your app. It will block the complete page until all the data is loaded. https://github.com/McNull/angular-block-ui – Janty Jan 12 '15 at 09:03

1 Answers1

0

Use ng-cloak on your template:

<div ng-cloak>
  <div ng-include="'client/template/nav.tpl.html'"></div>
   <div class='main-wrapper'>
     <div ui-view='' class='view'></div>
   </div>
  <div ng-include="'client/template/footer.tpl.html'"></div>
</div>
MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • Im using ng cloak, thats not solved my problem, ng cloak is for not to see the {{}} before they render. i want the all view not to show. –  Jan 12 '15 at 09:00