几年前，我用C#写了一个RSS阅读器，但是我想如果把它做成一个SPA（单页应用）效果会更好。 Angular使一些事情变得简单，RSS阅读器就是其中之一。 我也用Twitter Bootstrap（做UI）实现了RSS阅读器，调试页面样式是最难的地方之一...可能是因为我不擅长css的原因。
背景
我有一些自己喜欢的网站（ CodeProject, Dr.Dobb's Journal, ComputerWorld, Inc. Magazine）。 然而，我发现其中很多网站都有烦人的广告、风格不好的布局，我实在不愿意看到这些东西。当我说这话的时候，并不包括 CodeProject网站。
在这些网站之间来回切换浪费了很多时间。 因此我更喜欢浏览文章标题和简介，这样我可以决定是否进入文章内容页面。 这就是我决定写FreedReadR 单页应用的原因。
FreedReadR 响应是比较快的，因为它读取的数据量（RSS源）比较小。
下面是点击CodeProject选项的效果图：
下面是FreedReadR 加载某一个站点数据的效果图：
你现在可以试下效果：
差点忘了，我在创建自己的RSS 阅读器之前在Google上搜索了这个想法，发现jsfiddle中一段比较好的代码： angularJS Feed Reader alt.
我的代码和它的代码有相似的地方，但仍有不同，因为我想要实现更多的功能。 FreedReadR 允许你本地存储自己的RSS源数据，这样你就可以一直使用应用来创建自定义的RSS源。 另外，它的代码基于Twitter Bootstrap 2，FreedReadR 基于新版本Twitter Bootstrap 3。
使用代码
如果你熟悉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 role="form"> <div class = "row"> <div>
在上面的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的"全局变量"的使用应该有所顾忌.)