Including a Blog RSS Feed in your AngularJS App

Posted by Doug Schnelzer

Mar 12, 2014 12:45:00 PM AngularJS, Google Feed API, Node js

Including an RSS feed from a blog or news site is a great way to keep the content of your website fresh so that people will want to come back and check out your site regularly.  Including an RSS feed in your AngularJS application is easy using the Google Feed API.  We recently used the Google Feed API in an AngularJS web app.  We wanted to share this with the community, so we put together a simple example to show how this works.  You can check out the example on my GitHub account.  Thanks to Chris Britz for helping put all this together.

 

Let’s take a look at how the Google Feed API works in an AngularJS app.  The angular-google-feed repo on my GitHub account is a simple node.js application with a web app built on AngularJS.  To get the app up and running you’ll need to:

  1. Clone the repo at https://github.com/dschnelzer/angular-google-feed.git

  2. Install Node

  3. Run npm install the first time to get the server's dependencies

  4. Run node index to start the server

  5. Go to http://localhost:3000 in your browser.

 

You should see a simple web page that looks something like this.

png_base641bf8fe6d360bebab

 

Of course the blog will have newer articles.  That’s the whole point.

 

Now let’s walk through some of the code.  The entry point to the node.js application is located at /index.js.  This file starts the node http server on port 3000 and forwards all incoming requests to the ExpressJS framework.  In our example, we use the Express framework for serving static pages from our ‘file system’ (which is only a small part of Express) with the root directory is specified within the index.js file as:

 

.use(express.static('public'));

 

This above snippet states that anything under the public directory will be available to the outside world and served as static files.

 

The AngularJS app resides in the /public folder.  The starting page for the AngularJS app is index.html.  This is a simple AngularJS page.  The key things to note for this example is the <div ng-view></div> tag.  This is where Angular will insert the partial blog page, blog.html.  At the bottom of index.html, we are including our AngularJS scripts including the initial app.js, the controllers (controllers.js) and the services (blog_services.js).  We do this on the bottom of the page so that users of our app aren’t having to wait for scripts to load before the page renders.

 

<script src="js/app/app.js"></script>

<script src="js/app/services/blog_services.js"></script>

<script src="js/app/controllers/controllers.js"></script>

 

In the public/js/app/app.js file, we setup our routes.  In this simple example, we have one default route that is inserting the blog.html partial page and associating our Blog Controller (BlogCtrl).  

 

$routeProvider.

       when('/', {

           templateUrl: '/blog.html',

           controller: 'BlogCtrl'

       })

 

The Blog Controller (BlogCtrl) is defined in public/js/app/controllers/controller.js.  AngularJS injects our Blog Service (blogServices) into the controller when this controller is invoked.  The controller calls the service’s BlogList.get() function which will retrieve the RSS feeds from Google’s API and bind the results to the Angular $scope.

 

angular.module('myApp.controllers', ['ngResource','blogServices']).

   controller('BlogCtrl', function ($scope, BlogList) {

       $scope.feeds = BlogList.get();

   });

 

Let’s take a look at the blogServices which is defined in public/js/app/services/blog_services.js.  The service is defined as an Angular module.  The factory loads the JSON API for the Google Feed API service.

 

   $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {

       fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }

   });

 

The module service defines an array of feeds and then uses the Feed API created in the factory to fetch the RSS feed data.

 

module.service('BlogList', function ($rootScope, FeedLoader) {

   var feeds = [];

   this.get = function() {

       var feedSources = [

           {title: 'Mashable', url: 'http://feeds.mashable.com/Mashable'}

       ];

       if (feeds.length === 0) {

           for (var i=0; i<feedSources.length; i++) {

               FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {

                   var feed = data.responseData.feed;

                   feeds.push(feed);

               });

           }

       }

       return feeds;

   };

});

 

The blog.html partial page repeats over the retrieved feeds using ng-repeat.  For each feed, the page displays the feed’s title and then repeats over the entries in the feed using another ng-repeat.  We are also using Angular stanatize for the content snippets.  The sanitize service provides the ng-bind-html directives for us which renders all html or escaping strings like ‘&nbsp’ to the dom itself rather than leaving them as ugly string values.

 

<div class="container">

   <div class="well" ng-repeat="feed in feeds | orderBy:'title'" ng-animate="'animate'">

       <h2></h2>

       <p>

           <span ng-repeat="item in feed.entries" ng-animate="'animate'">

               <a class="h4" href="{{item.link}}" target="_blank">{{item.title}}</a>

               </br>

               <span ng-bind-html="item.contentSnippet"></span>

               <br/><br/>

           </span>

       </p>

   </div>

</div>

 

There are a number of ways to integrate the Google Feeds API with AngularJS.  In this example we’ve taken a typical approach using controllers and services to demonstrate an integration approach that will work for many AngularJS projects.

 

Posted by Doug Schnelzer

As Technology Director, Doug serves as a catalyst to Vizuri and identifies trends in the business technology landscape and turns them into realized opportunities for our customers.

    
Request a Complimentary Docker Consultation

An Open View

Vizuri Blog

Subscribing to our blog is a great way to stay up to date with the latest information from Vizuri, as well as our strategic partners. We focus on providing a range of content that is practically useful and relevant from both a technical and business perspective.

We promise to respect your privacy.

×