Hi Everyone! In this post, we’ll continue our journey through building a Hacker News Clone in AngularJS. The main focus of this post will be on building a new state for individual stories. To do that, we’re going to build a custom Angular component and refactor some of our earlier formatting code into Angular Filters. That way, we can reuse our earlier code in our new component. Our goal is to build a page that will display the comments related to a given story.
Be sure to check out the previous posts in the series if you haven’t already:
Part 1: Creating a Service to connect to the Hacker News API
Part 2: Creating a Custom Directive to display stories
Part 3: Adding Pagination
In Part 4 we’ll be covering the following tasks:
- Adding a new state for individual posts
- Adding content to the Post Show Page
- Creating a custom Angular Component to display individual comments
- Refactoring our Story Directive’s formatting functions into Angular Filters
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