A very simple RSS reader with AngularJS and Google Feed API

Last year I’ve written a few lines about aggregating feeds with SimplePlie. SimplePie is a nice PHP library but the version I used broke when my hosting provider decided to upgrade the servers to a new PHP version. Although a new version was quickly installed, I found the broken pages to be the perfect motivation to finally do some coding with AngularJS.So after having attended a few workshops about AngularJS, and having read the excellent book by Brad Green and Shyam Seshadri, I finally got around to do some actual work with the framework.

The basic idea was to develop a page where feeds from several sources are shown so you won’t have to visit each page individually to check out the latest news. You can check out examples of what I intended to do: RSS Reader.

I got ready to develop some JavaScript code to download RSS feeds but then I learned about the Google Feed API, saving me alot of time. With Google’s Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript, and in the format of yout chosing – in my case JSONP.

So what I ended up with is a very basic HTML page sprinkled with a few AngularJS directives:

Nothing very interesting going on here. The interesting parts take place in the accompanying Angular script feed.js:

The controller FeedCtrl places the feeds retrieved from the get() method of the FeedList service on the $scope. It also registers itself as as a listener on the FeedList in case the data has changed.

The FeedList service contains one method – get() – that holds an array of feed URLs. For each URL it calls FeedLoader.fetch() to retrieve the actual feeds. All the feeds are then placed in an array which is returned to the calling method.

FeedLoader is created with an AngularJS $resource factory. The result is an object that let’s us interact with REST services in a very simple manner. As you can see, it only takes a single line of code to interact with the Google Feed service.

Of course, this is a very simple example but enough to fulfil my requirements. Taking this example as a starting point, it is very easy to show extra information from the feed items e.g. the actual contents. You might also want to sort the feeds based on the date instead of based on the source.

16 Replies to “A very simple RSS reader with AngularJS and Google Feed API”

  1. Hi Wim ,

    at line 18 -19 where is the data coming from
    function (data) {
    var feed = data.responseData.feed;
    feeds.push(feed);}

    trying to define the anoymous function outside the loop, but can figure where the data argument is defind

      1. Hi thanks for ur quick reply , i fix the data problem , but i have another problem , i can get correct index
        on feed[x].entries[x] on loading multiple feed source , am passing to detail view template using
        /news/$parentindex/$index
        Index is correct but the new items that appears is from a different feed source

  2. For information, here is another way to get a callback once all feeds have been loaded :

    $scope.feedSources = [
    {title: 'Raspberry Pi Home Server', lang: "fr", defaultImage: "", url: 'http://www.pihomeserver.fr/feed'},
    ];

    $scope.feeds = [];

    $scope.getFeed = function(feedSource, callback) {
    return FeedLoader.fetch({q: feedSource.url, num: 10}, {}, function (data) {
    return callback(data.responseData.feed);
    });
    }

    $scope.getFeeds = function (callback) {
    var promises = [];
    $scope.feedSources.forEach(function (obj, i) {
    promises.push($scope.getFeed(obj, function(value){
    $scope.feeds.push(value);
    }));
    });
    $q.all(promises).then(function () {
    callback();
    });
    }

    // $scope.getFeed(0, function(result){console.log(result)})
    $scope.getFeeds(function(){
    console.log('End')
    })

    Usefull in my case when i want to perform actions once i’m sure to get all feeds loaded

    1. Hi ,could explain further – need to use the callback system , getting undefined for some values esp how to use this in the controller service model – your code does not specify controller or services

  3. How can I replace $resource with $http in this code? I don’t want to load angular-resource.js

  4. Hi wim,
    in your script of feed.js in line 16, i just wondering when the feeds variable is loaded it’s content? could you please explain it, i am a newbie in angular.js. Thanks before

    1. Hi Faisal,
      In line 16 I check to see if the array declared at line 1 already holds data. If so, there is no need to retrieve it again. If there is no data present, it is retrieved in lines 17-22, and added to the feeds array, by using the FeedLoader.fetch() method (see lines (4-8).
      Hope this clarifies it somewhat.

      Regards,
      WIm

  5. We just created a very similiar project with the Superfeedr API and it works really well! Thanks for the tip!

Comments are closed.