AngularJS : last tweets (Human Coders)
HTML
<div ng-app="app" ng-controller="TweetsCtrl">
<h1>Last tweets about AngularJS
<span ng-show="loading">[loading...]</h1>
<div id="filter">
<p>
Full text filter: <input ng-model="fullTextSearch"/>
<button ng-click="fullTextSearch=''">Clear</button>
</p>
<p>
User only: <input ng-model="structuredSearch.from_user_name"/>
Message only: <input ng-model="structuredSearch.text"/>
<button ng-click="structuredSearch={}">Clear</button>
</p>
</div>
<div id="tweets">
<div class="tweet" ng-repeat="tweet in tweets | filter:fullTextSearch | filter:structuredSearch">
<img class="avatar" ng-src="{{tweet.profile_image_url}}"/>
<p class="date">{{parseDate(tweet.created_at) | date:'dd/MM/yyyy - HH:mm'}}</p>
<p class="user">{{tweet.from_user_name}}
<span class="userid">@{{tweet.from_user}}</span></p>
<p class="text" ng-bind-html="tweet.text |linky"></p>
</div>
</div>
</div>
CSS
body {
background-color: #dadaff;
padding: 15px;
}
h1 {
text-align: center;
font-size: 1.1em;
font-weight: bold;
}
#filter {
background-color: white;
margin: 1em auto 1em auto;
padding: 1em;
border: solid #aaa 1px;
border-radius: 6px;
}
#tweets {
background-color: white;
margin: 1em auto 1em auto;
padding: 0;
border: solid #aaa 1px;
border-radius: 6px;
}
#tweets div.tweet {
border-bottom: solid #aaa 1px;
padding: 0.7em;
font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#tweets div.tweet:last-child {
border-bottom: none;
}
#tweets div.tweet img.avatar {
float: left;
width: 48px;
height: 48px;
margin-right: 10px;
padding: 4px;
}
#tweets div.tweet p {
margin: 0.3em;
padding: 0;
}
#tweets div.tweet p.user {
font-weight: bold;
}
#tweets div.tweet p.user span.userid {
font-weight: normal;
color: grey;
padding-left: 0.5em;
}
#tweets div.tweet p.date {
float: right;
font-size: 0.8em;
color: grey;
}
input {
width: 10em;
font-size: 0.9em;
}
button {
font-size: 0.8em;
}
JavaScript
angular.module('app', ['ngSanitize']);
function TweetsCtrl($scope, $http, $timeout, $sanitize) {
var query = "angularjs";
var urlJSONP = 'http://search.twitter.com/search.json?q='
+ encodeURIComponent(query)
+ '&rpp=100&include_entities=true&result_type=recent'
+ '&callback=JSON_CALLBACK';
function load () {
$scope.loading = true;
$http.jsonp(urlJSONP).success(function(data, status) {
$scope.tweets = data.results;
$scope.loading = false;
});
$timeout(load, 10000);
}
load();
$scope.parseDate = function (dateTxt) {
return Date.parse(dateTxt);
}
}