Criação de um cliente Hacker News usando Angular JS

Cenário

Então, eu queria experimentar o AngularJS neste fim de semana e decidi tentar construir para mim mesmo um pequeno cliente Hacker News.

Nada extravagante, apenas algo que buscaria os 30 melhores posts e os mostraria para mim.

O Javascript


Vou buscar as postagens por meio de uma API JSONP em 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;
});
}

O 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>

Tudo o que estou fazendo aqui é percorrer as postagens retornadas do feed e exibir os detalhes.

Filtros?


Ótimo, funciona – e levou apenas 5 minutos. No entanto, há uma última coisa que gostaria de acrescentar:

Você notará na página oficial do Hacker News, após o título da postagem, ele exibe apenas o nome do host de um URL , em vez do URL completo (google.com em oposição a http://www.google.com/en/ ) .

Vamos recriar esse efeito usando um Módulo Angular. Aqui está o código para fazer isso:

# 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

};
});

Criamos um módulo de filtro chamado shortURL que pega o texto do link e retorna o nome do host. Inspirado por esta postagem no StackOverflow) .

A última coisa que precisamos fazer é adicionar o módulo ao aplicativo:

# app.js

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


# index.html

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

Voila! Meu próprio site responsivo de Hacker News.