Angular dont show view before other view is loaded

Question

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.

You may want to use 'resolve': stackoverflow.com/questions/11972026/… — pixelbits
use angularjs block-ui module in your app. It will block the complete page until all the data is loaded. github.com/McNull/angular-block-ui — Janty

MarcoS MarcoS · Accepted Answer · 2015-01-12T08:46:00

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>

Angular dont show view before other view is loaded

1 Answers