使用 AngularJS 创建的 RSS 阅读器 —— FreedReadR
下载所有的源码和mongoose web服务器 – 538.1 KB
------------------------------------------分割线------------------------------------------
具体下载目录在 /2014年资料/9月/20日/使用 AngularJS 创建的 RSS 阅读器 —— FreedReadR
------------------------------------------分割线------------------------------------------
简介
几年前，我用C#写了一个RSS阅读器，但是我想如果把它做成一个SPA（单页应用）效果会更好。 Angular使一些事情变得简单，RSS阅读器就是其中之一。 我也用Twitter Bootstrap（做UI）实现了RSS阅读器，调试页面样式是最难的地方之一...可能是因为我不擅长css的原因。
背景
我有一些自己喜欢的网站（ CodeProject, Dr.Dobb's Journal, ComputerWorld, Inc. Magazine）。 然而，我发现其中很多网站都有烦人的广告、风格不好的布局，我实在不愿意看到这些东西。当我说这话的时候，并不包括 CodeProject网站。
在这些网站之间来回切换浪费了很多时间。 因此我更喜欢浏览文章标题和简介，这样我可以决定是否进入文章内容页面。 这就是我决定写FreedReadR 单页应用的原因。
FreedReadR 响应是比较快的，因为它读取的数据量（RSS源）比较小。
下面是点击CodeProject选项的效果图：
下面是FreedReadR 加载某一个站点数据的效果图：
你现在可以试下效果：
http://newtonsaber.com/FreedReadR
差点忘了，我在创建自己的RSS 阅读器之前在Google上搜索了这个想法，发现jsfiddle中一段比较好的代码： angularJS Feed Reader alt.
我的代码和它的代码有相似的地方，但仍有不同，因为我想要实现更多的功能。 FreedReadR 允许你本地存储自己的RSS源数据，这样你就可以一直使用应用来创建自定义的RSS源。 另外，它的代码基于Twitter Bootstrap 2，FreedReadR 基于新版本Twitter Bootstrap 3。
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
- 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
- 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
- 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm
使用代码
如果你熟悉Angular，开发时代码并不多。 大部分的难点是在Angular中使用Bootstrap。
其它问题可以在”Angular编程思想”中找到解决方法。$scope 的用法和控制器工作的方式有点不同。 首先你必须在html中设置应用程序的作用域。 类似下面的使用ng-app="FreedReadR"的代码，设置了html中$scope的作用域：所有div标签内的对象 –- 在下面的示例中作用域是整个页面。 我只需要一个控制器来处理整个应用程序逻辑，我对这一点比较满意。
<body ng-app="FreedReadR"><div data-ng-controller="FeedCtrl"> <h4>RSS Feed Reader using AngularJS</h4><form class="form-horizontal col-md-12" role="form"> <div class = "row"> <div class="col-md-6">在上面的html代码中，你可以看到Angular 应用模板的名称是FreedReadR。 当我设置应用程序模板、添加控制器(FeedCtrl) 代码时，我在main.js文件中使用了相同的名字。让我们看一下main.js中设置参数的代码。
var app = angular.module('FreedReadR', []);app.factory('FeedService',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)); } }});app.controller("FeedCtrl", ['$scope','FeedService', FeedCtrl]);在上面的js代码中，第一行是创建AngularJS 应用模板。 注意，它的名称是FreedReadR，我们在html代码中使用相同的名称以引用这个模板。
接下来，我们创建一个Angular工厂类，后面会用它访问RSS源URL来获取真实的源数据。 认真地看下代码中使用的 $http.jsonp请求。URL格式如下：
//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=
URL里调用了Google API，以前我并不知道Google API。这就是我在文章开头提到的jsfiddle示例的主要代码。 如果你想更多地了解Google API，你可以在这里下载：https://developers.google.com/feed/v1/jsondevguide。
在上面的js代码中，你会发现我们调用了encodeURIComponent 函数，它是用来转换URL的。
配置Angular 控制器
控制器用来处理应用程序的逻辑，因此大部分js函数应该在控制器内部。这就是Angular 帮助你组织（混乱的）js代码的方式。 我刚有大声说出来吗？
好吧,JavaScript鼓励杂乱无章,不是吗?这是它不好的地方.提到JavaScript的全局变量的时候,你不用带着恐惧尖声叫喊着说吗?如果不用,那么我们可能要撤销你的开发者许可证.你有编写软件的许可,不是吗?(译者注:因为你有开发者许可证,所以你自然也是带着恐惧尖声叫喊着说JavaScript的"全局变量"的--这里有些夸张的说法,意在说明开发者对于JavaScript的"全局变量"的使用应该有所顾忌.)
现在,在我们深入了解应用程序具体做了些什么的时候,看看控制器提供的功能.看看在控制器中的每个函数,以便了解FreedReadR可以做些什么.
检查localStorage, 存在则加载
我想做的一件事是,希望你在浏览器的slocalStorage中保存你的源.我不希望因为设置数据库而弄得一团糟,但我希望你可以增加自定义的源,并且让他们在你的浏览器中一直可用.
localStorage的限制
当然,localStorage的限制是,它存在于一个特定浏览器的给定域名.
这意味着,如果你从NewtonSaber.com/FreedReadR运行应用程序并保存一些自定义的源,当你从浏览器打开最初打开的连接的时候,你将会再次只看到列表中的这些内容.每个浏览器的localStorage都是私有的.所以,如果你某天使用IE增加了一些源,在接下来的一天将无法使用Chrome来查看已经添加的源.
对我来说,这个版本的应用程序已经OK了.因为它是我所希望的,用非常快速和了解其限制的技术开始.修正限制可能是以后另一篇文章的事情了.
你会发现在控制器代码中，我首先调用了一个函数：retrieveFromLocalStorage()。
函数如下：
function retrieveFromLocalStorage() { $scope.allFeeds = []; console.log("retrieving localStorage..."); try { $scope.allFeeds = JSON.parse(localStorage["feeds"]); console.log($scope.allFeeds.length); // console.log(JSON.stringify($scope.allFeeds)); if ($scope.allFeeds === null) { console.log("couldn't retrieve feeds" ); loadDefaultFeeds(); } } catch (ex) { console.log("ex: " + ex); loadDefaultFeeds(); saveToLocalStorage($scope.allFeeds); } }这是一个非常简单的函数。 它在 $scope的作用域内定义了一个名为 allFeeds的数组变量。 然后，通过 JSON.parse方法从localStorage数组中读取一个 feeds对象，这个对象保存的是已存在的 RSS源。如果这个 feeds对象为 undefined（这是首次运行应用程序），程序会抛出一个异常。 当异常被抛出时，应用程序会加载一些默认的 RSS源（loadDefaultFeeds()），然后将这些源保存到localStorage中供下次使用。