Geek Answers Handbook

Paging using AngularJS and Azure Mobile web services with ng resources

I use the following custom swap directive and it works great: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

But now I have over 50 elements and you want to use server side swap. My backend is Azure Mobile Web Services, but I'm stuck trying to get the right REST call and how to use it in Angular for paging purposes with my custom directive.

I tried using this in my service as follows:

// All Articles
pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
return $resource('https://myrestcall.net/tables/articles/:articleID?$top=100&$inlinecount=allpages', { articleID: '@id' },
{
    'query': { method: "GET", isArray: false },
    'update': { method: 'PATCH' }
}
);
}]);

My controller (note that I removed the voting functionality to keep this post concise):

 // Articles for Home Paging Test
pfcControllers.controller('pfcHomeArticlesCtrlTest', ['$scope', 'auth', 'pfcArticles', function ($scope, auth, pfcArticles) {

$scope.articles = [];
$scope.totalArticles = 0;
$scope.articlesPerPage = 50; // this should match however many results your API puts on one page
getResultsPage(1);

$scope.pagination = {
    current: 1
};

$scope.pageChanged = function (newPage) {
    getResultsPage(newPage);
};

function getResultsPage(pageNumber) {
    // Using inlinecount creates two objects of "results" and "count"
   pfcArticles.query(function(data) {
       $scope.articles = data.results;
       $scope.totalArticles = data.count;
    });
}    
}]);

html ( , , ):

    <div ng-controller="pfcHomeArticlesCtrlTest">
        <table class="table table-striped">
            <tr>
                <th>Votes</th>
                <th>Title</th>
                <th>Category ID</th>
                <th>Link</th>
            </tr>

            <tr dir-paginate="article in articles | itemsPerPage:10 total-items=" totalusers">

                <td>
                    <div class="col-md-1 voting well">
                        <div class="votingButton" ng-click="upVote(articlevote);">
                            <i class="glyphicon glyphicon-chevron-up"></i>
                        </div>
                        <div class="badge badge-inverse">
                            <div>{{article.articlevotes}}</div>
                        </div>
                        <div class="votingButton" ng-click="downVote(articlevote);">
                            <i class="glyphicon glyphicon-chevron-down"></i>
                        </div>
                    </div>
                </td>
                <td>{{article.articletitle}}</td>
                <td>{{article.articlecategoryid}}</td>
                <td><a ng-href="#article/{{article.id}}/{{article.articlelink}}">{{article.articletitle}}</a></td>
            </tr>
        </table>
        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
    </div>

, , :

angular.min.js: 101 : [$ parse: ] http://errors.angularjs.org/1.3.4/ $ ? 0 = & p1 = %20an %20unexpected %20token & p2 = 33 & p3 = %20% 7CNaNtemsPerPage% 3A10 %20total-% 3Dtotalusers & p4 = -% 3Dtotalusers (native)

, "totalusers", "totalArticles"

$http, ng-resource ().

.controller('UsersController', function($scope, $http) {
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = 25; // this should match however many results your API puts on one page
getResultsPage(1);

$scope.pagination = {
current: 1
};

$scope.pageChanged = function(newPage) {
getResultsPage(newPage);
};

function getResultsPage(pageNumber) {
// this is just an example, in reality this stuff should be in a service
$http.get('path/to/api/users?page=' + pageNumber)
    .then(function(result) {
        $scope.users = result.data.Items;
        $scope.totalUsers = result.data.Count
    });
}
})

URL- REST Angular? , $top, $skip $inlinecount, , "" . , ?

Ex.   https://myrestcall.net/tables/articles? $top = 100 & $skip = 50 & $inlinecount = allpages

+4

More articles:


All Articles