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('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.
- View the demo
- Download the source from GitHub.
Written by Ammar
Related protips
11 Responses
Unfortunately, the demo link here is 404 :(
Actually now it's 500 ;)
500 .....
@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!
@ammar : Awesome Work .. Thanks
@ammar you should try making a $resource for the hackernews api next!
This is really neat. Good work!
still 500 - comment when ready?
Thanks man.
ಠ_ಠ
dom manipulation in a filter
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?
