PAGINATION IN THE ANGULAR WAY: 2017

Angular JS uses ng-repeat for getting data from the database using service but the data appears as a singe flow in the particular view. Bootstrap has its own way of breaking data and displaying the same data in multiple views within the same page.This particular process is called Paging.

Angular JS has its own way of using pagination and now we are going to discuss the same way of paginating large amount of data using the angular JS dependency angular-ui-utils.

First of all in order to get the pagination working we need to install the dependency in the application using the following command:

1)Open Command Prompt and direct to the path of your application and give the above command

and then the command extracts the required libraries from GitHub through the same command.

bower install angular-utils-pagination

2)After the command is installed it downloads the required libraries and files for the dependency.

3)Once the command is installed then we need to add the following dependency in the App.js file so that the system detects the dependency.

'angularUtils.directives.dirPagination'

4)After adding this dependency in the App.js file there is one more essential step that is left which prevents the user from attaining pagination

5)We need to add the dirPagination.js related JS and CSS files in the index.html file so that the installed dependency’s JS and CSS files are detected by the browser.

<script src="/bower_components/angularUtilspagination/dirPagination.js"></script>

Add the following command in the index.html file which in turn detects the JS files of angularUtilspagination dependency.

6)After the above mentioned steps are completed we need to change the view part in order to achieve pagination. We display the data we get from the database using ng-repeat directive in AngularJS.

Now change the ng-repeat directive to dir-paginate and using a custom filter add the itemsPerPage:somevalue filter to the dir-paginate directive which appears as below:

<div class="panel-body" dir-paginate="p in mess|itemsPerPage:5">

7) After adding the following code in the view in a particular division check where the particular div is being closed and place the following code immediately after the commencement of the div.

<dir-pagination-controls

                             max-size="5"
                     direction-links="true"
                               boundary-links="true" >
                       </dir-pagination-controls>

8)This max-size field in this page represents the number of items the pagination control displays on a single page.

Direction-links are those clickable direction arrows which when clicked by the user navigates to the next set of items in a particular page.

Boundary-links are those elements which directly navigate the user either to the first set of items or the last set of items depending upon which boundary the user clicks.

8)After giving code in the above mentioned way we need to check for the difference between the

page before applying pagination and after applying pagination.

Before Pagination:

After Pagination:

In the image which shows After Pagination we can find the Pagination control bar at the end of the data which has both boundary links as well as direction links.

In this way we obtain pagination in AngularJS using the dependency angular-utils-pagination and display the available data in a certain set of pages defined as per the itemsPerPage filter.

Saturday 3 June 2017

PAGINATION IN THE ANGULAR WAY