Building a Hacker News Clone in AngularJS – Part 3

Hi Everyone! I’m Dakota Lee Martinez. In this video series I’ll be using the Hacker News API to build out a Hacker News Clone in AngularJS.

These videos are accompanied by a series of blog posts at becomingaprogrammer.com. You can find the written explanation of the process and code samples there.

Building a Hacker News Clone in AngularJS – Part 3

The 3rd blog post of the series covers implementing AngularJS pagination using a library by Michael Bromley:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

In this video we’re going to use the on-page-change option on the dir-pagination-controls directive to solve the numbering issue (each page has different stories, but they’re all numbered 1-30).

In the previous video I implemented a different solution using the indexOf method to get the index of the current story within the top stories collection, added 1 to it and then displayed the number. This solution gave us issues with our presentation. So here is a better way:

Here are the tasks we’ll complete to fix the numbering issue:

* Defining an updatePage method on our TopStoriesController’s $scope
* Using the on-page-change option on the dir-pagination-controls directive to call the updatePage method
* Defining the vm.start property in the TopStoriesController to keep track of what number the list should start on.
* Cleaning up the top-stories.html view and adding the ‘start’ property to the ol tag so that the list starts on the proper number.

source