Last Updated: September 09, 2019
· ammar

Creating a Hacker News Client Using Angular JS


So, I wanted to try out AngularJS this weekend, and decided at trying my hand at building myself a little Hacker News client.

Nothing fancy, just something that would fetch the top 30 posts and display them for me.

The Javascript

I'm going to be fetching the posts through a JSONP API over at iHackerNews.

# app.js

// Controller for displaying top 30 HN Posts

function TopListCtrl($scope, $http) {
  $http.jsonp('').success(function(data) {
    $scope.posts = data;


# index.html

<html ng-app="hn">
    <body ng-controller="TopListCtrl">
        <li ng-repeat="post in posts.items">
            <a href="{{ post.url }}">{{ post.title }}</a>
            <span class="url">{{ post.url }}</span>
            <small> {{ post.points + " points"}} by {{ post.postedBy }} {{ post.postedAgo }} | {{ post.commentCount + " comments" }}</small>


All I'm doing here is looping through the posts returned from the feed, and displaying the details.


Great, it works - and it only took 5 minutes. There is however one last thing I'd like to add:

You'll notice on the Hacker News official page, after the post title it just displays the Hostname of a URL, as opposed to the full URL ( as opposed to

We're going to recreate this affect using an Angular Module. Here's the code to do it:

# app.js

// This filters module takes a URL and splits it up into its hostname

angular.module('filters', []).
    filter('shortURL', function () {
        return function (text) {

            var getLocation = function(href) {
                var l = document.createElement("a");
                l.href = href;
                return l;

            var url = getLocation(text);

            return url.hostname


We create filter module called shortURL which takes the link text, and returns the hostname. Inspired by this post on StackOverflow).

Last thing all we need to do is add the module to the app:

# app.js

// Adds filters to app
angular.module('hn', ['filters']);

# index.html

<span class="url">{{ post.url | shortURL }}</span>

Voila! My own responsive, Hacker News site.

11 Responses
Add your response

Unfortunately, the demo link here is 404 :(

over 1 year ago ·

Actually now it's 500 ;)

over 1 year ago ·

500 .....

over 1 year ago ·

@rshetty @finnpauls Sorry guys, I'm in the process of changing web hosts / domains, so the link doesn't work :(

But the github link is still up, it's really easy to download it, and just open it up on your local machine!

over 1 year ago ·

@ammar : Awesome Work .. Thanks

over 1 year ago ·

@ammar you should try making a $resource for the hackernews api next!

over 1 year ago ·

This is really neat. Good work!

over 1 year ago ·

still 500 - comment when ready?

over 1 year ago ·

Thanks man.

over 1 year ago ·

dom manipulation in a filter

over 1 year ago ·

I tried to run this locally, but all that appears is the heading and not any of the posts. I get a error in the console; [ Failed to load resource: net::ERRNAMENOT_RESOLVED]. Any idea why the intended behavior is not manifesting?

over 1 year ago ·