问一旦更少的CSS开始编译，$routeChangeStart上显示的加载消息就会消失。
EN

Stack Overflow用户

提问于 2016-07-26 00:22:52

回答 1查看 43关注 0票数 0

我已经创建了一个相当繁重的AngularJS应用程序，它有很多依赖项(JS库和较少的css)。当命中应用程序URL时，它根据登录状态确定路由，如果未登录，则重定向到登录路由。问题是，在重定向到路由并加载HTML之前，页面几乎在4-5秒内保持完全空白，这看起来确实令人困惑。

我试着用$routeChangeStart实现一些消息，但是没有得到我想要的结果。我想要“正在加载”的消息，只要URL被点击，直到应用被路由并且HTML被完全加载，但是消息在几毫秒后就消失了。

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

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

更新:问题似乎是为了让页面准备好而需要编译和加载的CSS较少。加载指示器文本可在不减少CSS的情况下正常工作(参见this Plunker)

在实际应用中，我将加载指示器文本放在body标签后面，指示器文本后面有很多JS脚本(包括LESS.js)。加载指示符会一直显示到LESS开始编译，并在编译开始后消失。有什么解决方案吗？

angularjs

less

回答 1

Stack Overflow用户

发布于 2016-07-26 01:06:00

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

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

.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			
			});			
        }
    }]);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38572913

复制

相似问题

问一旦更少的CSS开始编译，$routeChangeStart上显示的加载消息就会消失。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一旦更少的CSS开始编译，$routeChangeStart上显示的加载消息就会消失。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一旦更少的CSS开始编译，$routeChangeStart上显示的加载消息就会消失。
EN