0pfmvq
Last Updated: April 22, 2016
·
13.95K
· ammar

Creating a Hacker News Client Using Angular JS

Picture

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('http://api.ihackernews.com/page?format=jsonp&callback=JSON_CALLBACK').success(function(data) {
    $scope.posts = data;
  });
}

The HTML


# index.html

<html ng-app="hn">
    <head>
        ....
    </head>
    <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>
        </li>
    </body>

</html>

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

Filters?


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 (google.com as opposed to http://www.google.com/en/).

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

1491

Unfortunately, the demo link here is 404 :(

over 1 year ago ·
4436

Actually now it's 500 ;)

over 1 year ago ·
4443

500 .....

over 1 year ago ·
4449

@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 ·
4455

@ammar : Awesome Work .. Thanks

over 1 year ago ·
4696

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

over 1 year ago ·
5902

This is really neat. Good work!

over 1 year ago ·
6258

still 500 - comment when ready?

over 1 year ago ·
15514

Thanks man.

over 1 year ago ·
15778

ಠ_ಠ
dom manipulation in a filter

over 1 year ago ·
20885

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; [http://api.ihackernews.com/page?format=jsonp&callback=angular.callbacks._0 Failed to load resource: net::ERRNAMENOT_RESOLVED]. Any idea why the intended behavior is not manifesting?

over 1 year ago ·