在角JS延迟加载数据
问题描述:
我有这样在角JS延迟加载数据
(function (app) {
app.controller('productListController', productListController)
productListController.$inject = ['$scope', 'apiService', 'notificationService', '$ngBootbox', '$filter'];
function productListController($scope, apiService, notificationService, $ngBootbox, $filter) {
$scope.products = [];
$scope.page = 0;
$scope.pagesCount = 0;
$scope.getProducts = getProducts;
$scope.keyword = '';
$scope.search = search;
$scope.deleteProduct = deleteProduct;
$scope.selectAll = selectAll;
$scope.deleteMultiple = deleteMultiple;
function deleteMultiple() {
var listId = [];
$.each($scope.selected, function (i, item) {
listId.push(item.ID);
});
var config = {
params: {
checkedProducts: JSON.stringify(listId)
}
}
apiService.del('/api/product/deletemulti', config, function (result) {
notificationService.displaySuccess('Deleted successfully ' + result.data + 'record(s).');
search();
}, function (error) {
notificationService.displayError('Can not delete product.');
});
}
$scope.isAll = false;
function selectAll() {
if ($scope.isAll === false) {
angular.forEach($scope.products, function (item) {
item.checked = true;
});
$scope.isAll = true;
} else {
angular.forEach($scope.products, function (item) {
item.checked = false;
});
$scope.isAll = false;
}
}
$scope.$watch("products", function (n, o) {
var checked = $filter("filter")(n, { checked: true });
if (checked.length) {
$scope.selected = checked;
$('#btnDelete').removeAttr('disabled');
} else {
$('#btnDelete').attr('disabled', 'disabled');
}
}, true);
function deleteProduct(id) {
$ngBootbox.confirm('Are you sure to detele?').then(function() {
var config = {
params: {
id: id
}
}
apiService.del('/api/product/delete', config, function() {
notificationService.displaySuccess('The product hase been deleted successfully!');
search();
}, function() {
notificationService.displayError('Can not delete product');
})
});
}
function search() {
getProducts();
}
function getProducts(page) {
page = page || 0;
var config = {
params: {
keyword: $scope.keyword,
page: page,
pageSize: 20
}
}
apiService.get('/api/product/getall', config, function (result) {
if (result.data.TotalCount == 0) {
notificationService.displayWarning('Can not find any record.');
}
$scope.products = result.data.Items;
$scope.page = result.data.Page;
$scope.pagesCount = result.data.TotalPages;
$scope.totalCount = result.data.TotalCount;
}, function() {
console.log('Load product failed.');
});
}
$scope.getProducts();
}
})(angular.module('THTCMS.products'));
代码,所以我的问题是,当我加载应用程序采取了一些时间来加载数据。 我需要加载数据尽快 是否有任何解决方案?
答
由于您通过api调用加载数据,因此会有延迟。为了处理这种延迟,你应该显示一个加载屏幕。数据加载完成后,加载屏幕将隐藏起来,您的主屏幕可以看到。你可以使用$ http拦截器来实现这一点。
答
中,API调用几乎肯定造成了延误。数据可能通过api调用缓慢接收,因此您可以显示任何类型的加载文本/图像以通知使用数据正在加载。
答
如果你想在控制器进入时准备好数据,你可以添加一个resolve
参数,并在此路由的路由配置中将api呼叫作为$ promise传递。
使用角加载杆很容易实现 – Jerry