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.