$ routeChangeStart中显示的加载消息在LESS CSS开始编译后立即消失

Question

我创建了一个非常沉重的AngularJS应用程序，它具有许多依赖项（JS库和LESS css）。当应用程序URL被击中时，它根据登录状态确定路线，如果未登录，则重定向到登录路线。问题是，直到路线被重定向到，并且HTML被载入，该页面几乎是4 -5秒，这看起来很混乱。

我试图使用$ routeChangeStart实现一些消息，但它没有给我想要的结果。我马上想“载入中...”消息URL被击中，直到应用程序路由和HTML满载但该消息被几毫秒后消失

$rootScope.$on('$routeChangeStart', function() { 
    $rootScope.layout.loading = true; 
}); 

$rootScope.$on('$routeChangeSuccess', function() { 
    $rootScope.layout.loading = false; 
}); 

UPDATE：该问题似乎成为正在编译和加载的LESS CSS以使页面准备就绪加载指示符文本正常工作，没有LESS CSS（请参阅this Plunker）

在实际应用程序中，我已将加载指示符文本放在body标记之后，并且在指示符文本后面有很多JS脚本（包括LESS.js），加载指示器显示直到LESS开始编译，并且在编译开始后消失，对此的任何解决方案？

Answer 1

我相信.run（）方法的angular可以解决你的问题，Run方块是Angular中最接近于主方法的东西。运行块是需要运行以启动应用程序的代码。在完成所有服务配置并创建注入器后执行。

当您的应用程序加载时，您可以尝试以下显示/隐藏加载程序。

.run(['$location', function ($location) {  
 
\t \t // if your application URL os https://myApplication/Login/loginStatus 
 
     if ($location.path() === '' && $location.$$absUrl.indexOf('/loginStatus') > -1) { 
 
\t \t \t // show loading 
 
\t \t \t // some code here to return route based on login status for example, 
 
\t \t \t var promise = getLoginStatus(); 
 
\t \t \t promise.then(function (result) { 
 
\t \t \t \t // redirect to the route as per login status \t \t \t 
 
\t \t \t \t $location.path(result); //Where result is route url. 
 
\t \t \t \t // hide loading \t \t \t 
 
\t \t \t }); \t \t \t 
 
     } 
 
    }]);