This is Part 3 of the series on Building a Hacker News Clone in AngularJS. The Project is the penultimate assignment in the Learn Verified Full Stack Web Developer Program. In this post, we’ll be focusing on implementing AngularJS Pagination. To do this, we’ll be using a library developed by Michael Bromley.
In this post we’ll cover the following tasks:
- Using the
dir-paginate directive to paginate our list of top stories
- Using the
dir-pagination-controls directive to add pagination links.
- Displaying the proper numbers on each page
Michael Bromley’s library gives us two directives that we can use to implement AngularJS Pagination. The library itself makes it extremely easy to add pagination to your Angular app. In the following sections, you’ll see that we ran into some issues that are specific to our Hacker News Clone. After we add pagination to our app, we’ll walk through how to work with the library to address the issues that were specific to this application.
This is part 2 of my walkthrough on creating a Hacker News clone in AngularJS. This is one of the final projects in the Learn Verified Curriculum. I recommend reading through Part 1 of the series on Building a Hacker News Clone first.
In the first post, we bootstrapped our Angular app, created a nested view using Angular UI Router, created a TopStoriesService to connect to the Hacker News API, and used that service to display a list of story ids in the browser. In this post, we’ll cover the following tasks:
- Adding a custom directive to display each story
- Calling on our TopStoriesService within our directive’s controller to fetch information from the Hacker News API
- Adding our custom directive to the top-stories view
- Adding a view template for our new directive to use
Hi everyone! I’ve been in Sweden for the last week or so, so I was a bit delayed in posting here, but it’s been great fun so far! I did a few lessons last week and really liked using the Angular UI Router. I’ve just begun learning about how it works, so I thought it would be nice to do a tutorial on it to solidify what I’ve learned. I ended up running into a couple of snags along the way. One of them was annoyingly simple–a missing script tag. The other one was actually a good illustration of the nested routes provided by Angular UI router and how they work when combining a parent and child state.