使用 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选项的效果图:

使用 AngularJS 创建的 RSS 阅读器 —— FreedReadR

下面是FreedReadR 加载某一个站点数据的效果图:

使用 AngularJS 创建的 RSS 阅读器 —— FreedReadR

你现在可以试下效果:

http://newtonsaber.com/FreedReadR

差点忘了,我在创建自己的RSS 阅读器之前在Google上搜索了这个想法,发现jsfiddle中一段比较好的代码: angularJS Feed Reader alt.

我的代码和它的代码有相似的地方,但仍有不同,因为我想要实现更多的功能。 FreedReadR 允许你本地存储自己的RSS源数据,这样你就可以一直使用应用来创建自定义的RSS源。 另外,它的代码基于Twitter Bootstrap 2FreedReadR 基于新版本Twitter Bootstrap 3

希望你喜欢,并分享我的工作~带你走近AngularJS系列

  1. 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近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&apos;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中供下次使用。

相关推荐