Building a Hacker News Clone in AngularJS – Part 3

tutorial

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.

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

Getting Started with Angular UI Router

Video Tutorial

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.