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.