延迟加载主页，直到所有模板加载

我遇到了一个问题，我的主页加载速度比AngularJS中的其他模板快。在所有模板加载之前，延迟加载主页的最佳方式是什么？基本上我遇到的问题是，在主页加载后，用户在导航栏中单击不同的路线，并且它不会进入该路线。然后再点击一下（比如5秒延迟），它就会进入所需的路线（其他所有路线都会在此之后运行）。延迟加载主页，直到所有模板加载

这里是$routeProvider方法调用：

ANGULAR

App.config(function ($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: home, 
      controller: 'mainController', 
      resolve: mainCont.resolve 
     }) 
     .when('/gym', { 
      templateUrl: gym, 
      controller: 'gymController', 
      resolve: gymCont.resolve 
     }) 
     .when('/instructors', { 
      templateUrl: instructors, 
      controller: 'instructorsController', 
      resolve: instructorCont.resolve 
     }) 
     .when('/classes', { 
      templateUrl: classes, 
      controller: 'classesController', 
      resolve: classCont.resolve 
     }) 
     .when('/media', { 
      templateUrl: media, 
      controller: 'mediaController', 
      resolve: mediaCont.resolve 
     }) 
     .when('/shop', { 
      templateUrl: shop, 
      controller: 'shopController' 
     }) 
     .when('/contact', { 
      templateUrl: contact, 
      controller: 'contactController', 
      resolve: contactCont.resolve 
     }) 
     .when('/admin', { 
      templateUrl: admin, 
      controller: 'adminController' 
     }); 
});

我试图把覆盖整个屏幕，直到窗口是完全加载的元件，但它不工作对于所有模板：

$(window).on('load', function() { 
     $("#cover").hide(); 
    });

来源

2015-12-21 A.Sharma

尝试使用$routeChangeSuccess事件来设置作用域变量您的加载符号或隐藏目的

app.run(['$rootScope', function($root) { 
    $root.$on('$routeChangeStart', function(e, curr, prev) { 
    if (curr.$$route && curr.$$route.resolve) { 
     // Show a loading message until promises aren't resolved 
     $root.loadingView = true; 
    } 
    }); 
    $root.$on('$routeChangeSuccess', function(e, curr, prev) { 
    // Hide loading message 
    $root.loadingView = false; 
    }); 
}]);

您可以对一个视图或所有视图进行一般操作。并使用ng-show="loadingView"显示隐藏导航面板。

来源

2015-12-21 17:07:03 insanevirus

延迟加载主页，直到所有模板加载

回答

相关问题