Javascript AngularJS：显示加载器图像直到加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34327350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: show loader image until data is loaded
提问by sairam
displaying results using angular js + php, how to show loader image until data is loaded, here my code is written below,
使用angular js + php显示结果，如何在加载数据之前显示加载器图像，这里我的代码写在下面，
How do I have AngularJS show a loading image until the data has finished loading?
在数据加载完成之前，如何让 AngularJS 显示加载图像？
app.js file
app.js 文件
var app = angular.module('myApp3', ['ui.bootstrap']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 20; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
and php code is here
和 php 代码在这里
<html ng-app="myApp3" ng-app lang="en">
<div ng-controller="customersCrtl">
<div class="content" >
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div class="col-md-4">
<h5>Filtered {{ filtered.length }} Of {{ totalItems}} Total Locations</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>Id <a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Place Name <a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Category ID <a ng-click="sort_by('category_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.category_name}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No Locations found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/angular.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/app/app.js"></script>
</html>
回答by Venugopal
display loader onload and hide it once data loaded.
显示加载器 onload 并在加载数据后隐藏它。
$scope.showLoader = true;
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').success(function(data){
$scope.showLoader = false;
// rest of your code
});
EDIT: html code from Saeed's answer
编辑：来自赛义德回答的 html 代码
<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
<img src="source"> <!-- or any other spinner -->
</div>
回答by Saidbek Arislonov
Addition to @Venugopal`s answer. To display that loading image in the html
除了@Venugopal 的回答。在 html 中显示加载图像
<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
<img src="source"> <!-- or any other spinner -->
</div>
回答by dreamweiver
You need to show the loader image before the ajax call and remove it after it completes in both success and error handler.
您需要在 ajax 调用之前显示加载程序图像，并在成功和错误处理程序中完成后将其删除。
you will find plenty of loader images online, which you can use it for your application.
您会在网上找到大量加载程序图像，您可以将其用于您的应用程序。
JS CODE
代码
//show the loader image in center of screen & prevent any user interactions
$scope.imLoading = true;
$http.get('http://www.testurl.com/index.php/site/getprofileLocations').then(
function(data){
//hide the loader image & process successful data.
$scope.imLoading = false;
}, function (errorData) {
//hide the loader image & show error message to user
$scope.imLoading = false;
});
CSS:
CSS：
.im_loading{
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#fff url(../images/loader.gif) no-repeat center center;
width:70px;
height:70px;
z-index:9999;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
HTML CODE:
HTML代码：
<div class="im_loading" ng-show:"imLoading"></div>
Note: Your code is proccessing only successful ajax call & not erroneous call which is not good as your code becomes unresponsive when error is returned, so you need to handle error case as well.
注意：您的代码仅处理成功的 ajax 调用而不是错误的调用，这并不好，因为您的代码在返回错误时变得无响应，因此您还需要处理错误情况。
回答by Rahul
You can do one thing:
你可以做一件事：
- Keep hidden your html content by default
- Show it when you get the response
- 默认情况下隐藏您的 html 内容
- 收到回复时显示
like:
喜欢：
<div class="content" ng-show="!showLoader">
.....
</div>
So using this only loader will show till you get your data from server.
所以使用这个唯一的加载器会一直显示，直到你从服务器获取数据。
回答by Rajashekhar Reddy
Whenever we use an HTTP call in AngularJS, we want to show the loading image by default. So here, we are going to achieve this by using a custom directive.
每当我们在 AngularJS 中使用 HTTP 调用时，我们都希望默认显示加载图像。所以在这里，我们将通过使用自定义指令来实现这一点。
JS CODE
代码
var app = angular.module('appMyCustomModule',[]);
app.directive('dirCustomLoader', ['$http', function ($http) {
return {
restrict: 'E',
template: '<div class="loading-icon"></div>',
link: function (scope, element, attrs) {
scope.isLoading = function () {
return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isLoading, function (value) {
if (value)
element.removeClass('ng-hide');
else
element.addClass('ng-hide');
});
}
};
}]);
CSS:
CSS：
.loading-icon {
background: url(static image url) no-repeat scroll center #fff;
display: inline-block;
font-size: 0;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999999999999999999 !important;
opacity: .5;
}
HTML CODE:
HTML代码：
<dir-custom-loader class="ng-hide"></dir-custom-loader>
回答by Leonardo Lima
There is a better way that prevents showing two icons for example:
有一种更好的方法可以防止显示两个图标，例如：
(BAD WAY)
（不好的方式）
When angular is manipulating the DOM, it can show the search icon before hiding the loading icon. Thats why its bad to have two elements.
当 angular 在操作 DOM 时，它可以在隐藏加载图标之前显示搜索图标。这就是为什么有两个元素不好。
<i class="fa fa-search" ng-hide="loadingData" ></i>
<i class="fa fa-circle-o-notch fa-spin" ng-show="loadingData"></i>
(GOOD WAY)
（好办法）
This way prevents showing the loading and the search icon when angular is hiding and showing elements.
这种方式可以防止在 angular 隐藏和显示元素时显示加载和搜索图标。
<i class="fa" ng-class="loadingData ? 'fa-circle-o-notch fa-spin' : 'fa-search' " ></i>
And the script would be something like this.
脚本将是这样的。
$scope.clickEventThatDoSomething = function () {
$scope.loadingData = true;
http.get('http://YourAPIUrl').then(function (data) {
$scope.loadingData = false;
$scope.data = data.data;
}).catch(function (err) {
$scope.loadingData = false;
})
}
