Media RSS example using AngularJS

Media RSS example / demo using AngularJS, Google Feeds API, jQuery and Twitter bootstrap. by Joseph Oster, April 2013 wingo.com

by sijoma

HTML

<link rel="stylesheet" href="http://www.wingo.com/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://www.wingo.com/bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://www.wingo.com/foundation_icons_general/stylesheets/general_foundicons.css">
<script src="http://www.wingo.com/bootstrap/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-sanitize.min.js"></script>
<div id="topNav">
    <div id="aboutInfo" class="pull-right">
        <div class="dropdown">	<a id="dropInfo" role="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">About</a>

            <div class="dropdown-menu small" aria-labelledby="dropInfo">
                <p>Media RSS demo using <a href="http://angularjs.org/" target="_blank">AngularJS</a>, <a href="https://developers.google.com/feed/" target="_blank">Google Feeds API</a>, <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://twitter.github.io/bootstrap/" target="_blank">Twitter bootstrap</a>.</p>
                <p class="pull-right"> <a href="http://www.wingo.com/angular/rss_demo/" target="_blank">full screen</a>
                    <br> <em>by <a href="http://www.wingo.com/services.html" title="wingo.com">Joseph Oster</a>, April 2013</em>
                    <br> <a href="http://www.wingo.com/services.html" title="wingo.com Web Site Design"><img src="http://www.wingo.com/images/wsb.gif" width="111" height="40" alt="wingo.com Web Site Design" /></a>

                </p>
            </div>
        </div>
    </div>	<a href="#/choose_feed" class="btn btn-primary pull-right btnPadR" ng-show="ifPathNot('/choose_feed')"><i class="foundicon-edit"></i> change feed</a>
	<a href="#/" class="btn btn-primary pull-right btnPadR" ng-show="ifPathNot('/')"><i class="foundicon-left-arrow"></i> list</a>

</div>
<div ng-view...

CSS

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face {
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont93e3.eot?v=4.4.0');
    src:url('../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont93e3.html?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont93e3.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont93e3.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont93e3.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}
.fa {
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.fa-lg {
    font-size:1.33333333em;
    line-height:.75em;
    vertical-align:-15%
}
.fa-2x {
    font-size:2em
}
.fa-3x {
    font-size:3em
}
.fa-4x {
    font-size:4em
}
.fa-5x {
    font-size:5em
}
.fa-fw {
    width:1.28571429em;
    text-align:center
}
.fa-ul {
    padding-left:0;
    margin-left:2.14285714em;
    list-style-type:none
}
.fa-ul>li {
    position:relative
}
.fa-li {
    position:absolute;
    left:-2.14285714em;
    width:2.14285714em;
    top:.14285714em;
    text-align:center
}
.fa-li.fa-lg {
    left:-1.85714286em
}
.fa-border {
    padding:.2em .25em .15em;
    border:solid .08em #eee;
    border-radius:.1em
}
.fa-pull-left {
    float:left
}
.fa-pull-right {
    float:right
}
.fa.fa-pull-left {
    margin-right:.3em
}
.fa.fa-pull-right {
    margin-left:.3em
}
.pull-right {
    float:right
}
.pull-left {
    float:left
}
.fa.pull-left {
    margin-right:.3em
}
.fa.pull-right {
    margin-left:.3em
}
.fa-spin {
    -webkit-animation:fa-spin 2s infinite linear;
    animation:fa-spin 2s infinite linear
}
.fa-pulse {
   ...

JavaScript

'use strict';
google.load("feeds", "1");

angular.module('RSS_Demo', ['ngSanitize'])

    .config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: "list_view.html"
    })
        .when('/detail', {
        templateUrl: "detail_view.html"
    })
        .when('/choose_feed', {
        templateUrl: "choose_feed.html"
    })
        .otherwise({
        redirectTo: '/'
    })
})

    .directive('listDone', function () {
    return function (scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.listDone);
        }
    }
})

    .directive('onEnter', function () {
    return function (scope, element, attrs) {
        element.on('keydown', function (event) {
            if (event.which === 13) {
                scope.$apply(attrs.onEnter);
            }
        })
    }
})

    .service('http://simonjmarcus.tumblr.com/rss', function ($q, $rootScope) {
    this.get = function (url) {
        var d = $q.defer();
        var feed = new google.feeds.Feed(url);
        feed.setNumEntries(10);
        feed.load(function (result) {
            $rootScope.$apply(d.resolve(result));
        });
        return d.promise;
    }
})

    .filter('strip_http', function () {
    return function (str) {
        var http = "http://";
        return (str.indexOf(http) == 0) ? str.substr(http.length) : str;
    }
})

    .controller('AppCtrl', function ($scope, $location, $timeout, rssFeed) {
    $scope.feedList = [
        'http://feeds.feedburner.com/TEDTalks_video',
        'http://feeds.nationalgeographic.com/ng/photography/photo-of-the-day/',
        'http://sfbay.craigslist.org/eng/index.rss',
        'http://www.slate.com/blogs/trending.fulltext.all.10.rss',
        'http://feeds.current.com/homepage/en_US.rss',
        'http://feeds.current.com/items/popular.rss',
        'http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml'];

    $scope.scrollPos = {}; // scroll position of each view

   ...