I'm currently working on implementing a loading feature for my Angular application. The goal is to preload page 3 when a user navigates to page 2.
Utilizing $resource, I'm querying the Posts resource using Post.query(). By calling Post.query({page: 1}), I retrieve an array of post records ranging from ID 0 to 9.
In my Post controller, I've set up parameters to specify the page like so: posts.json?page=1, where each page contains 10 posts.
The key objective is to load and combine pages 1 and 2 upon initial load, storing them in $scope.visiblePosts. Once a user reaches page 2, I want to fetch page 3 in the background and append it to $scope.visiblePosts.
For pagination, I've implemented the following code:
View:
<div ng-repeat="post in filtered = visiblePosts |
startFrom:(currentPage-1)*pageSize | limitTo:pageSize | orderBy:order:true">
App:
app.filter("startFrom", function() {
return function(input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});
Controller:
$scope.currentPage = 1;
$scope.pageSize = 10;
$scope.noOfPages = Math.ceil($scope.posts.length / $scope.pageSize);
$scope.noPrev = function() {
return $scope.currentPage === 1;
};
$scope.noNext = function() {
return $scope.currentPage === $scope.noOfPages;
};
$scope.prevPage = function() {
return $scope.setPage($scope.currentPage - 1);
};
$scope.nextPage = function() {
return $scope.setPage($scope.currentPage + 1);
};
$scope.setPage = function(pageNo) {
return $scope.currentPage = pageNo;
};
$scope.filter = function() {
return window.setTimeout((function() {
return $scope.noOfPages = Math.ceil($scope.filtered.length / $scope.pageSize);
}), 10);
};
$scope.$watch("currentPage", $scope.setPage);
Any assistance would be greatly appreciated as I have tried various methods such as using concat() without success.