When requesting the network, display the loading screen
1. Using HTTP Interceptor, TRUNCATE handles all HTTP requests and responses, as well as errors. Set the $rootscope.loading=true at request and set the $rootscope.loading=false when feedback is received.
2. Set mask div,ng-show=loading, that is, the matte is displayed in the request, and the request is complete without displaying
Details:
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
<Divclass= "Flyover"Ng-show= "Loading"> <Divclass= "Mask"></Div> <Divclass= "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;}
Reference: http://tech.wonga.com/angular-http-loader/
AngularJS Loading loading screen