Building a Hacker News Clone in AngularJS Part 4 – Angular Filters

tutorial

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:

  1. Adding a new state for individual posts
  2. Adding content to the Post Show Page
  3. Creating a custom Angular Component to display individual comments
  4. Refactoring our Story Directive’s formatting functions into Angular Filters

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

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.

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.

How to Record Both Ends of a Skype Call on Your Mac For Free — Step by Step Tutorial

Video Tutorial

Hi Everyone! I’m hoping to start recording a podcast in the coming months where I speak to people about their experience becoming a software developer in hopes that we can help you make the transition from your current career. We’ll be discussing early experiences with code and programming and how people got initially interested in software development and then the moment that they got hooked and started pursuing it seriously. So, I wanted to learn how to record Skype calls for free.

The Moment I Knew I Could Be a Programmer

Story

I was exposed to programming a couple of times in my life before I decided to dive in headfirst. The first was in high school at a summertime Code Clinic in C++ at UCLA. I remember the students who were helping to run it telling my parents that I would be good at it, but didn’t really learn anything exciting so that was that. The next time was in my CS5 class at Harvey Mudd College where my final project was to build a Connect Four Game in Java. I stayed up super late finishing this one, and I really enjoyed it, but didn’t really catch the bug.

The moment that I realized that I could really do it for a living was much later.