a blog for those who code

Friday 6 May 2016

How to Create Simple RSS Reader in Ionic Application

In this post we will be discussing about creating simple RSS reader in Ionic Application. Almost all the websites have RSS feed, so here you will learn to create an application which will read the feed of any website and display nicely in your application. We will be using Google Feed API to process the RSS XML and convert it to JSON but its upto you to choose XML processor.

At first we will update our index.html to the below code :

<body ng-app="starter">
  <ion-nav-bar class="bar-stable"></ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

Also Read : Repeater Control in Ionic Framework with Refresh

Our app.js file will have the code as shown below were we are configuring the state.

.config(function($stateProvider, $urlRouterProvider) {
  .state('page1', {
    url: "/page1",
    templateUrl: 'templates/page1.html',
    controller: 'RssFeedCtrl'
  })

  $urlRouterProvider.otherwise('/page1');
}); 

Next we will write our Controller i.e. RssFeedCtrl which calls the Google Feed API with the parameters v (version) : 1.0,  q (query) : http://www.codingdefined/feeds/posts/default and num (number of results) : 10 as shown below. On getting the response we are saving the feed entries on the $scope.entries.

.controller('RssFeedCtrl', function($http, $scope) {
  $scope.init = function() {
            $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v" : "1.0", "q" : "http://www.codingdefined.com/feeds/posts/default", "num" : "10" }})
  .error(function(data) {
    console.log(data);
  })
  .success(function(data) {
    $scope.entries = data.responseData.feed.entries;
  })
 };
})

Also Read : Adding Search Bar in the Header of Ionic App


Next we will write our page1.html which is created inside templates folder as shown below

<ion-view view-title="RSS Reader">
  <ion-content class="padding" ng-controller="RssFeedCtrl" ng-init="init()">
    <div class="list">
      <div ng-repeat="entry in entries" class="item">
        <b>{{entry.title}}</b><br />
        <span ng-bind-html="entry.contentSnippet"></span>
      </div>
    </div>
  </ion-content>
</ion-view>

After running you will get the following output :


Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

1 comment:

  1. Is it possible to fetch images as well in the feed display ?

    ReplyDelete