Paging using AngularJS and Azure Mobile Web Services with ng-resource

Question

I am using the following custom directive for paging and it works great: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

But now I have more than 50 items and would like to use server side paging. My backend is Azure Mobile Web Services, but I am stuck trying to get the correct REST call and how to use it in Angular for the purposes of paging with my custom directive.

I tried to leverage this by 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 is (note that I removed the functionality for voting 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;
    });
}    
}]);

My html is as follows (note that I removed the voting functionality from the controller in this post to keep it more concise):

    <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>

The error I am receiving are as follows:

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

It appears to be referencing "totalusers" but my controller has 'totalArticles"

The custom directive has an example of server side paging using $http, but I am using ng-resource (above).

.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
    });
}
})

What is the correct REST URL format for paging, and how do I use it within my Angular app? I believe I can use $top, $skip, and $inlinecount but I am not sure how that translates to "pages" per the custom directive. Is this what is causing the parsing error?

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

Upon adding more records, it appears that the max is 50 per page, but now how do I code this to properly page? — Kode
– Kode, Commented Jan 26, 2015 at 23:01
seems like a syntax error on the articles filter: dir-paginate="article in articles | itemsPerPage:10 total-items=" totalusers" — Glenn Ferrie
– Glenn Ferrie, Commented Jan 30, 2015 at 18:08
That's exactly part of it. Made some adjustments in my posted answer as well. — Kode
– Kode, Commented Jan 31, 2015 at 4:23

Kode · Accepted Answer · 2015-01-30 18:01:12Z

0

This was solved via Michael Bromley's assistance as stated here: https://github.com/michaelbromley/angularUtils/issues/109

answered Jan 30, 2015 at 18:01

Kode

3,25120 gold badges80 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Paging using AngularJS and Azure Mobile Web Services with ng-resource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related