首页 > 代码库 > angularJS loading 载入画面
angularJS loading 载入画面
在请求网络的时候,显示loading画面
1. 使用http的interceptor,截断处理所有的http请求和响应,以及错误。在request的时候设置$rootScope.loading=True,在反馈的时候设置$rootScope.loading=False.
2. 设置遮罩div,ng-show=loading,即请求中显示遮罩,请求完毕不显示
细节:
interceptor
$httpProvider.interceptors.push([‘$q‘,‘$rootScope‘,function($q,$rootScope){ return { ‘request‘: function(config){ $rootScope.loading = true; return $q.resolve(config); }, ‘response‘: function(response){ $rootScope.loading = false; return $q.resolve(response); }, ‘requestError‘:function(rejection){ $rootScope.loading = false; return $q.reject(rejection); }, ‘responseError‘:function(rejection){ $rootScope.loading = false; return $q.reject(rejection); } } }]);
html
<div class="flyover" ng-show="loading"> <div class="mask"></div> <div class="alert alert-info"> <strong>Loading Foo...</strong> </div> </div>
css
/** mask **/ .flyover .mask { top: 0; left: 0; position: fixed; width: 100%; height: 100%; opacity: 0.5; background: black; z-index: 1049; } .flyover .alert{ left: 50%; top: 50%; position: fixed; z-index: 1050; }
参考:http://tech.wonga.com/angular-http-loader/
angularJS loading 载入画面
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。