AngularJS RSS Reader v3

by Joe Steinbring

HTML

<div ng-app="FeedReader" ng-controller="FeedCtrl">
    <form ng-submit="ChangeFeed()">
        <input type="text" ng-model="InputRssFeed" size="30" placeholder="{{rssFeed}}">
        <input class="btn-primary" type="submit" value="Load Feed">
    </form>
     <h1>{{feed.channel.title}} - {{feed.channel.description}}</h1>

    <ul>
        <li ng-repeat="item in feed.channel.item">
             <h2><a href="{{item.link}}">{{item.title}}</a></h2>

            <p>{{item.description}}</p>
        </li>
    </ul>
</div>

CSS

ul {
    list-style-type: none;
}

JavaScript

// The module
var FeedReader = angular.module('FeedReader', []);

// The controller
FeedReader.controller('FeedCtrl', ['$scope', '$http', function ($scope, $http) {
    // The default feed
    $scope.rssFeed = "http://steinbring.net/feed/";
    // Define the JSON feed for fetching the RSS feed
    jsonFeed = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + $scope.rssFeed + "'&format=json";
    // Actually fetch the feed
    $http.get(jsonFeed).success(function (data) {
        $scope.feed = data.query.results.rss;
    });

    // The function triggered by 'load feed'
    $scope.ChangeFeed = function () {
        // Change the RSS feed
        $scope.rssFeed = $scope.InputRssFeed;
        // Define the JSON feed for fetching the RSS feed
        jsonFeed = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + $scope.rssFeed + "'&format=json";
        // Actually fetch the feed
        $http.get(jsonFeed).success(function (data) {
            $scope.feed = data.query.results.rss;
        });
    };

}]);