Fun w/Angular, jQuery & feeds

Fun w/Angular, jQuery, google ajax API, and Yahoo/Media RSS qualified feeds.

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-sanitize.min.js"></script>
<body ng-app="FeedReader">
    <div ng-controller="blogCtrl">
        <div id="feedsContainer" ng-repeat="list in feedList">
            <h2><a href="{{list.link}}" title="{{list.title}}">{{list.title}}</a></h2>
            <ol>
                <li ng-repeat="item in list.entries">
                    <p>
                        <a href="{{item.link}}"><img class="thumbnail" src="{{item.mediaGroups[0].contents[0].thumbnails[0].url}}" /></a>
                    <a href="{{item.link}}"><span class="title" ng-bind-html="item.title"></span></a>    
                    </p>
                    <p class="caption"><span ng-bind-html="item.contentSnippet"></span> <span> {{item.publishedDate | myDate}}</span></p>
                   
                </li>
            </ol>
            
            <pre>{{feedList}}</pre>
        </div>
    </div>
</body>

CSS

ol li {border-bottom: 1px solid #000000; min-height: 125px;}
a img.thumbnail { height: 25%; width: 25%; margin-right: 2%; max-height: 120px; float: left;}
a span.title {float: left; width: 70%; margin-bottom: 2%; }
p.caption {float:clear;}

JavaScript

/*
10Aug14 - grab RSS feeds as JSON w/out YQL and w/out jQuery

todo:   - list on only those items w/thumbnails (or fallback?) ...
           ... see if fallback image exists for thumbnail
        - de-reference thubmnails w/out hard coded [0] indices
        - display story on click as SPA
        - can we make this a defer/promose asynch SPA?
        - don't forget junit or karma tests
*/

var feedList = [];
var app = angular.module('FeedReader', ['ngResource', 'ngSanitize']);
app.factory('feedLoader', ['$resource', function ($resource) {
    var googleAPI = $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
        collect: {
            method: 'JSONP',
            params: {
                v: '1.0',
                callback: 'JSON_CALLBACK'
            }
        }
    });
    return googleAPI;
}]);
app.service('createFeedList', ['feedLoader', function (feedLoader) {
    this.get = function () {
        var feed = {
            feedName: 'Sacbee 49ers Blog',
            feedURL: 'http://www.almshaheer.com/rss.php'
        };
        feedLoader.collect({
            q: feed.feedURL,
            num: 15
        }, {}, function (result) {
            var feed = result.responseData.feed;
            feedList.push(feed);
        });
        return feedList;
    }
}])
app.controller('blogCtrl', ['$scope', 'createFeedList', function ($scope, createFeedList) {
    $scope.feedList = createFeedList.get();
}]);


app.filter('myDate', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'ddMMMyy @ HH:mm:ss');
        return _date.toUpperCase();
    };
});