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 Anov Siradj

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 style="margin-top: 40px;"></div>

<div id="veil"...

CSS

body {padding: 0;}

h1, h3, p, .well, .alert, .changeList {
	margin-right: 30px;
	margin-left: 30px;
}
@media screen and (max-width: 640px) {
	h1, h3, p, .well, .alert, .changeList {
		margin-right: 10px;
		margin-left: 10px;
	}
}

.dropdown-menu p, .well p {
		margin-right: 0;
		margin-left: 0;
}

#topNav {
	position: fixed;
	top:0;
	left: 0;
	padding: 1px 0;
	background:#000000;
	width: 100%;
	z-index: 10;
}

#aboutInfo {
	margin-right: 10px;
}
#aboutInfo .dropdown-menu {
	padding:10px;
	left:-300%;
}
#aboutInfo p.pull-right {
	text-align: right;
	margin: -10px 0 0 0;
}

.btnPadR {margin-right: 10px;}

.label {margin-right: 5px;}

.btn-group + .btn-group {margin-left: 0;}

h3.lead {margin-bottom: 10px;}

.well .rssThumb img {
	width: 132px;
	margin: 0 16px 4px 0;
}

#vPlayer {
	display: block;
	margin:0 auto 10px auto;
	width: 512px;
	height: 288px;
}

#vidTagAlert {
	text-align:center;
	display:none;
}

#veil {
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	cursor: not-allowed;
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000000 url(http://www.wingo.com/demos/AngularShieldLogo.png) no-repeat center;
}
#feedLoading {
	position: absolute;
	top:200px;
	width:100%;
	text-align: center;
	font-size: 4em;
	color:white;
	text-shadow: 2px 2px 2px #021124;
}

#inputFeed {width: 75%;}

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('rssFeed', 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

		$(window).on('scroll', function() {
			if ($scope.okSaveScroll) { // false between $routeChangeStart and $routeChangeSuccess
				$scope.scrollPos[$location.path()] = $(window).scrollTop();
				//console.log($scope.scrollPos);
			}
		});

		$scope.scrollClear = function(path)...