5 - Use Pagination
On this page
Reset the workspace to step 5:
Pagination
The Document Collection resource described in step 1 supports pagination of the documents list through the _offset and _max parameters:
In this step the app's document list will be extended with pagination using the above parameters and UI Bootstrap's pagination directive.
Code Changes
Dependencies
A dependency to Angular UI Bootstrap is added to the app.
index.html
app.js
DocumentsService
The DocumentsService is extended with offset and max parameters to enable pagination.
app.js
DocumentsController
The DocumentsController is extended with some management of the various pagination parameters, as well as a pageChanged function to update the list when a different page is selected in the page navigation.
app.js
View
A page navigation is added to the documents-list view using UI Bootstrap's uib-pagination directive, bound to the various pagination parameters and the pageChanged function.
documents-list.html
Experiments
- The itemsPerPage parameter is hardcoded in the app. Can you make it configurable through a dropdown?
Summary
In this step the app's document list view was extended with paging. This concludes the tutorial. If you have any questions or suggestions please use the forum!