Hacker News Clone in AngularJS – Post 3, Part A: AngularJS Pagination library by Michael Bromley
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.
This video covers the following topics:
* Adding Michael Bromley’s AngularJS Pagination Library to the project
Michael Bromley’s library for pagination introduces new directives that we can use within our html to implement pagination. The first thing we do to start using the library is to replace the ng-repeat directive on the collection we want to paginate with the dir-paginate directive.
The library uses ng-repeat under the hood, so it will accept the same expression we’re already using for our ng-repeat. But, we also need to define an itemsPerPage option (passed as a filter to our ng-repeat expression). For example, “item in items | itemsPerPage: 30”
Implementing AngularJS pagination is very easy using Michael Bromley’s library so you should definitely check it out if you’re looking to implement pagination in AngularJS.
We ended up having a numbering issue for this project because we’re using an ordered list. I mention the issue at the end of this video. The next video in this playlist goes over the first solution I came up with for fixing this numbering issue. In the next video, I present a better solution that will end up being carried forward throughout the rest of the tutorial.
Because the video does go through a little use of the tachyons css library and talk about yet another possible way of solving this numbering issue, I decided to leave it in. I think that some people may find some value in its being part of the playlist. It is a good lesson for beginners about recognizing the kind of code smells that occur when issues with separation of concerns arise. Specifically, it can show you to watch out if you feel like you’re solving a data problem within the view. Passing data to the view should be done in the controller, not the view.
That said, if you’re comfortable with AngularJS and just want to learn more about Michael Bromley’s library, feel free to skip the following video and continue with the actual solution that I present there.
Thanks for listening!
Dakota Lee Martinez