Making a Quick RSS Feed Reader using AngularJS
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.
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.
[cc lang=”javascript”]
‘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));
}
}
}]);
[/cc]
We have this one Controller FeedCtrl which gets invoked from the template
For convenience we have pre-filled some feed source and put it with Bootstrap dropdown menu.
[cc lang=”html”]
[/cc]
Using ng-click on the dropdown links we point populate the feed source url to the input field called 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 $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 $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.
[cc lang=”html”]
-
{{feed.title}}
{{feed.contentSnippet}}
{{feed.publishedDate}}
[/cc]
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.
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.
