Question

我创建了一个非常繁重的AngularJS应用程序，它有很多依赖项（JS库和LESS css）。当命中应用程序URL时，它会根据登录状态确定路由，并在未登录时重定向到登录路由。问题是，在路由重定向到，并且加载HTML之前，页面几乎保持空白状态。 -5秒，看起来真的很混乱。

我尝试使用$ routeChangeStart实现一些消息，但它没有给我想要的结果。一旦URL被点击，我就想要'loading ...'消息，直到app被路由并且HTML被完全加载。但是消息在几毫秒之后就消失了。

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

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

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

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

Answer 1

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

您可以在加载应用程序时尝试以下操作来显示/隐藏加载程序。

＆＃13;

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

＆＃13;

只要LESS CSS开始编译，$ routeChangeStart上显示的加载消息就会消失

1 个答案: