Skip to content

Instantly share code, notes, and snippets.

@pappu687

pappu687/angular-feed-reader

Last active December 25, 2017 16:49
Show Gist options
  • Save pappu687/4994547 to your computer and use it in GitHub Desktop.
Save pappu687/4994547 to your computer and use it in GitHub Desktop.
Download ZIP
Quick Feed Reader with AngularJS
Raw
angular-feed-reader
<!DOCTYPE html>
<html ng-app="RSSFeedApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AngularJS Feed Reader - jsFiddle demo</title>
<script type='text/javascript' src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js'></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css">
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
*{
font-family:roboto,arial,helvetica;
}
.small{
font-size:11px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
'use strict';
var App = angular.module('RSSFeedApp', []);
App.controller("FeedCtrl", ['$scope','FeedService', function ($scope,Feed) {
$scope.loadButonText="Load";
$scope.loadFeed=function(e){
Feed.parseFeed($scope.feedSrc).then(function(res){
$scope.loadButonText=angular.element(e.target).text();
$scope.feeds=res.data.responseData.feed.entries;
});
}
}]);
App.factory('FeedService',['$http',function($http){
return {
parseFeed : function(url){
return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(url));
}
}
}]);
//]]>
</script>
</head>
<body>
<div class="container-fluid">
<div data-ng-controller="FeedCtrl">
<div class="row-fluid">
<h4>Feed Reader using AngularJS</h4>
<form>
<div class="input-prepend span12">
<div class="btn-group">
<button class="btn btn-info" type="button" tabindex="-1">{{loadButonText}}</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" ng-click="feedSrc='http://rss.cnn.com/rss/cnn_topstories.rss';loadFeed($event);">CNN</a></li>
<li><a href="#" ng-click="feedSrc='http://news.ycombinator.com/rss';loadFeed($event)">Hacker News</a></li>
<li><a href="#" ng-click="feedSrc='http://feeds2.feedburner.com/Mashable';loadFeed($event)">Mashable</a></li>
<li><a href="#" ng-click="feedSrc='http://feeds.huffingtonpost.com/huffingtonpost/raw_feed';loadFeed($event)">Huffington Post</a></li>
<li><a href="#" ng-click="feedSrc='http://feeds.feedburner.com/TechCrunch';loadFeed($event)">TechCrunch</a></li>
</ul>
</div>
<input type="text" class="span10" autocomplete="off" placeholder="Enter Feed URL" data-ng-model="feedSrc" />
</div>
<div class="input-prepend">
<span class="add-on"><i class=" icon-search"></i></span>count
<input class="span12" type="text" data-ng-model="filterText" />
</div>
</form>
</div>
<div class="row-fluid">
<ul class="unstyled">
<span class="badge badge-warning" ng-show="feeds.length > 0">{{(feeds | filter:filterText).length}} Items</span>
<li ng-repeat="feed in feeds | filter:filterText">
<h5><a target="_blank" href="{{feed.link}}">{{feed.title}}</a></h5>
<p class="text-left">{{feed.contentSnippet}}</p>
<span class="small">{{feed.publishedDate}}</span>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
@pappu687
Copy link
Author

That was like a million years ago. May not work. But can be made to work of course. This is part of a blog post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment