spinner and ng-show, ng-if, ng-switch
Blogs20152015-07-13
spinner and ng-show, ng-if, ng-switch
According to Delaying AngularJS route change until model loaded to prevent flicker, the following is not a perfect solution:
$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
$scope.httpStatus = 200;
}, function(response) {
$scope.httpStatus = response.status;
});
// Then in the view:
<div ng-show="httpStatus == 0">
Loading
</div>
<div ng-show="httpStatus == 200">
Real stuff
<div ng-repeat="project in projects">
...
</div>
</div>
<div ng-show="httpStatus >= 400">
Error, not found, etc. Could distinguish 4xx not found from
5xx server error even.
</div>However, I like this way to add spinner class, it is clear, tidy, and intuitive, better than resolve. I did a little change to use this solution:Delaying AngularJS route change until model loaded to prevent flicker, the following is not a perfect solution:
$scope.ready = false;
$resource.query('/projects', function(response) {
$scope.ready = true;
if(response.status===200 || /^3d{2}/.test(response.status)) {
$scope.done= true;
//$scope.projects = JSON.parse(response.data);
}
else { // 4xx or 5xx
$scope.done = false;
$scope.status = response.error.status;
}
});
// Then in the view:
<div ng-show="!ready">
<span class="spinner">Loading</span>
</div>
<div ng-show="ready">
<div ng-if="done">
<div ng-repeat="project in projects">
...
</div>
</div>
<div ng-if="!done">
<div ng-switch on="status">
<div ng-switch-when="404">...</div>
</div>
</div>