Angular Feed Reader

An example of a feed reader built in Angular.

by Jeremy Likness

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-app="feedApp" ng-controller="feedCtrl as ctrl">
    <form role="form" name="feedForm" nosubmit="">
        <input class="form-control" required="" type="url" 
        ng-model="ctrl.feedUrl"/>
        <button class="btn btn-primary" ng-click="ctrl.loadFeed()"
        ng-disabled="feedForm.$invalid">Load Feed</button>
    </form>
    <hr/>
    <h1>
        <a ng-href="{{ctrl.feed.link}}" target="_blank">
            {{ctrl.feed.title}}
        </a>
    </h1>
    <p>{{ctrl.feed.description}}</p>
    <ul>
        <li ng-repeat="entry in ctrl.feed.entries">
            <a ng-href="{{entry.link}}" target="_blank">
                {{entry.title}}
            </a>
            &nbsp;&mdash;&nbsp;
            {{entry.contentSnippet}}
        </li>
    </ul>
</div>

JavaScript

(function (app) {
    
    function Service ($http, $q) {
        this.$http = $http; 
        this.$q = $q;
    }
    
    Service.$inject = [ "$http", "$q"];
    
    Service.prototype.loadFeed = function (url) {
        var deferral = this.$q.defer();
        this.$http.jsonp("https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=" + url + "&callback=JSON_CALLBACK")
        .then(function (response) {
            deferral.resolve(response.data.responseData.feed);
        }, function (error) {
            deferral.reject(error); 
        });
        return deferral.promise; 
    };
    
    app.service("rssFeed", Service);
    
    function Controller (rssFeed) {
        this.rssFeed = rssFeed;
        this.feedUrl = "http://feeds.feedburner.com/CSharperImage";
    }
    
    Controller.$inject = ["rssFeed"];
    
    Controller.prototype.loadFeed = function () {
        var _this = this;
        this.rssFeed.loadFeed(this.feedUrl) 
        .then(function (feed) {
            _this.feed = feed;
        });
    };
    
    app.controller("feedCtrl", Controller);
    
})(angular.module("feedApp", []));