UPDATE: wonder how to do the same using React and NodeJS? Read here!

One of the first issues I faced while studying/working with AngularJS was how to do pagination with data received from the backend. Assuming that all the real paging is done server-side, I “just” needed a way to easily tell the user on which page he is and how to navigate through the rest of the data.

Before we start, I have uploaded a small demo on Git, here’s the link: https://github.com/mizrael/AngularJs-Pagination and a screenshot:

The idea is to use an AngularJS Directive that has access to the paging info (exposed on the current $scope) and creates all the links using an html template.

I have used ASP.NET MVC and WebAPI to generate the dummy data and the Bootstrap pagination component to display the links.

Here’s the simple API controller, the GET action returns an “enhanced” collection class containing the items (yeah) and all the relevant pagination infos (look at the sources here)

On Client-Side all the javascript code is included in this file, obviously for a bigger project it would be better to split directive, controllers and so on in separate scripts.

As you may see, there’s the App declaration at the very beginning, then I have created a basic factory to access the data on the server. Right after there’s the controller that consumes the resource and stores the current page number and the total pages count.
At the end of the script there’s our Directive. The most important part is the range() function, in charge of generating and array of the page indices that will be rendered by the template.

That’s all!

UPDATE 29/06/2015:
I have updated the project a little bit, here’s why.

Did you like this post? Then