Harry Wolff

You can't escape my laugh.

Building Hacker News With Angularjs

This week Hacker News announced its official API. This is really great news. Prior to this official API all 3rd-party apps resorted to scraping the website to as their data source, a brittle and unscalable practice. This new API provides a standard and efficient way to create 3rd-party Hacker News applications.

Last night I decided to try out this new API. I randomly decided to sprint and see how quickly I could create an exact clone of Hacker News using angularjs. Turns out it took me almost exactly 2 hours to do. Pretty damn impressed with myself.

To cut to the chase, find the demo url here: http://hswolff.github.io/hn-ng/ And the source code here: https://github.com/hswolff/hn-ng

How Was This Made?

I started the project via scaffolding through Yeoman'shttp://yeoman.io/ gulp-webapp generator. This saved me a lot of initial work, as it created all the rote files I would have otherwise had to create and saved me the trouble of finding one of my old gulp files to copy over.

After that I added angularjs to my bower file:

bower install --save angularjs

And then used the magic of one of Yeoman's default tasks, gulp wiredep to automatically inject those new bower files into my index.html file.

I did hit a struggling point when it came to compiling my angular application. As angular dev's are aware, there are some issues surrounding minification. To surmount this I grabbed the gulp-ng-annotate plugin which handles adding all required annotations to your code.

There was also the issue of pre-warming my template cache. To solve this I used gulp-angular-templatecache, which allows you to pre-warm your $templateCache to not require any AJAX calls in production.

After solving those two hiccups everything was smooth sailing. I sprinted through the controller that handles the homepage and was just racing against myself.

All-in-all a wonderful exercise. I hope as the official Hacker News API expands I can also expand my clone, and maybe add some of my own personal enhancements to it. For now I hope you enjoy the code!