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

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.

Say Thanks
Respond

11 Responses
Add your response

1491

Unfortunately, the demo link here is 404 :(

over 1 year ago ·
4436
Cbfc998ef595bccea5bc8593a4527152

Actually now it's 500 ;)

over 1 year ago ·
4443
54588 555132027835563 687647376 o

500 .....

over 1 year ago ·
4449
Y4n2zro9nvqoznk1rtav

@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
54588 555132027835563 687647376 o

@ammar : Awesome Work .. Thanks

over 1 year ago ·
4696
D27d0237833f17bd8c503b038c7bbcf2

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

over 1 year ago ·
5902
Lucas

This is really neat. Good work!

over 1 year ago ·
6258
B633452832ed5613b18a4432b0149ae9

still 500 - comment when ready?

over 1 year ago ·
15514
Bd4d48cfd5f54a205f4c95331d5cb2f1

Thanks man.

over 1 year ago ·
15778
454cea4c773e4e7ef6ceeb7ef0e18bd9

ಠ_ಠ
dom manipulation in a filter

over 1 year ago ·
20885
None

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 ·