Google+

Since AngularJS is the default JavaScript Framework for Front End Application at iVive, we decided to post some angularJS articles from now on. At first, we’re coming up with a nifty minimal RSS Feed Reader with few lines of code.

Demo View It Online
Download Source Files

You clicked the demo button, didn’t you ? This idea of showing the demo + source at the top of page was from Envato sites which everyone likes. People feel more interested this way.

Anyways, let’s look at what we did. We used one of the preferred angular code conventions, used $http and a factory as you can see below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'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));
        }
    }
}]);

We have this one Controller FeedCtrl which gets invoked from the template

1
<div data-ng-controller="FeedCtrl"></div>

For convenience we have pre-filled some feed source and put it with Bootstrap dropdown menu.

1
2
3
4
5
6
7
<ul class="dropdown-menu">
  <li><a href="#">CNN</a></li>
  <li><a href="#">Hacker News</a></li>
  <li><a href="#">Mashable</a></li>
  <li><a href="#">Huffington Post</a></li>
  <li><a href="#">TechCrunch</a></li>
</ul>

Using ng-click on the dropdown links we point populate the feed source url to the input field called feedSrc

1
<input type="text" data-ng-model="feedSrc" />

and call the loadFeed method within the FeedCtrl Controller. Since the source of the feeds are on a different domain, we had to use JSONP. $http provider has a shortcut for this

1
$http.jsonp(url,config)

– which returns a promise. We wrapped this jsonp call within a service so that in future we can change it if we want (with $resource may be ?).

Ow, forgot to mention, as you might probably know that RSS feeds are basically XML but we want JSON right ? Google fortunately has an API service which will turn our XML feed into JSON. If we look at the parseFeed method, we are giving the feed url to Google and send us with a JSON. Don’t forget the callback thing, in JSONP calls.

Ok, now that the Feed service is giving us the JSON with a promise callback, we’d simply assign a scope variable to iterate through the results. We have used it like

1
 $scope.feeds=res.data.responseData.feed.entries;

. And in the template part, we’re using an ng-repeat directive to loop through the object and come up with the view.

1
2
3
4
5
6
7
<ul>
  <li>
    <h5><a href="{{feed.link}}" target="_blank">{{feed.title}}</a></h5>
    <p class="text-left">{{feed.contentSnippet}}</p>
    <span class="small">{{feed.publishedDate}}</span>
  </li>
</ul>

You might notice that we have filter too which can filter results of the fetched feed using the second textbox on top of the page. Passing a model as an argument to the filter just filters it. YES! it’s that simple. And if you look at closely, it only shows up when we have feeds using the magical ng-show thing.

Attaching a screenshot here of how it appears.

angular-rss-feed-reader

In coming articles, we might want to make it a little more rich with some other stuffs. Hope you like is. Send us any questions you might have.


Post Meta

Comment(s):
0
Posted on:
February 20, 2013
Category:
AngularJS, JS
Tags:
,

Leave a Reply

Written by

Archive