Building a Hacker News Clone in AngularJS – Part 2

tutorial

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

Building a Hacker News Clone in AngularJS – Part 1

tutorial

As part of the curriculum for the AngularJS portion of the Learn Verified Full Stack Web Developer Course, students build a Hacker News Clone. In this project, we use the Hacker News API to reconstruct the top stories page at Hacker News.

At this point, we’ve already completed nearly the entire course, which I’ve been working on part time for the past 8 months, so we’re pretty far in. Of the 600+ lessons I’ve completed, 110 of them are related to AngularJS. We’ve already covered a lot of the concepts that we’ll be tackling when building this project, but up until this point we’ve been working on them one small piece at a time. In the next few posts, I’ll be walking you through my progress through the project.