首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用AngularJS制作一个简单的RSS阅读器的教程

Posted in Javascript onJune 18, 2015

简介

几年前，我用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 加载某一个站点数据的效果图：

使用AngularJS制作一个简单的RSS阅读器的教程

你现在可以试下效果：

http://newtonsaber.com/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 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中供下次使用。

先看看loadDefaultFeeds()函数,然后我们再看saveToLocalStorage()函数.
 

function loadDefaultFeeds()
{
 $scope.allFeeds = [{titleText:"Load (from textbox)",url:""},
 {titleText:"CodeProject C#",url:"http://www.codeproject.com/webservices/articlerss.aspx?cat=3"}, {titleText:"ComputerWorld - News",url:"http://www.computerworld.com/index.rss"},
 {titleText:"Dr. Dobb's",url:"http://www.drdobbs.com/rss/all"},
 {titleText:"InfoWorld Today's News",url:"http://www.infoworld.com/news/feed"},
 {titleText:"Inc. Magazine",url:"http://www.inc.com/rss/homepage.xml"},
 {titleText:"TechCrunch",url:"http://feeds.feedburner.com/TechCrunch"},
 {titleText:"CNN",url:"http://rss.cnn.com/rss/cnn_topstories.rss"}
     ];
}

就像你所看到的,我增加了一些我最喜欢的源,这样,你就可以很容易的试用这个应用程序.它仅仅只是一个对象数组,通过titleText和url来定义.

只要它们都加载到$scope类型的变量allFeeds之中,你就可以使用ng-repeat从HTML获取它们了,它看起来像下面这样:
 

<li ng-repeat="feed in allFeeds">
 <a href="#" ng-click="loadFeed($event,feed.url);">{{feed.titleText}}</a>
</li>

这创建了选项的列表,当你点击下拉框按钮的时候,它们将会显示在上面.如你所看到的,我们在ng-repeat语句中引用了allFeeds $scope变量,然后我们引用了feed.titleText来生成入口.

现在你的按钮已经加载了很好的标题了。

我说过会给你介绍saveToLocalStorage()方法,现在让我们看一看。
 

function saveToLocalStorage(feeds)
 {
  // Put the object into storage
 
  localStorage.setItem('feeds', angular.toJson(feeds));
  console.log(angular.toJson(feeds));
  console.log("wrote feeds to localStorage");
 }

这是一个非常简单的方法。方法允许你传入  feeds 对象(这应该是一个feed对象数组)。然后我们简单地调用  localStorage.setItem( ) 方法。正如方法的名字所说，我们可以用该方法来保存对象。要注意的是，当我们保存对象的时候，我们会调用对象的  angular.toJson()  方法。这是个方法会帮助我们去除一些angular特有的属性，而这些属性是我们不想保存的。所以调用这个方法非常重要，因为angular会在对象中保存一些特有属性，这些属性会让你感到迷惑。

现在，应用程序已经加载了一些默认的RSS源，如果你想获取某一个RSS源的数据，点击下拉框按钮，选择其中一个值，然后应用程序会运行下面的代码来获取相关的数据。 我们在$scope作用域内添加一个loadFeed函数，函数如下。 下面的函数会被调用，因为我们在html中给按钮绑定了事件ng-click="loadFeed($event,feed.url);"。

loadFeed=function(e,url){
  $scope.currentButtonText = angular.element(e.target).text();
  // 清空过滤文本框中的上次展示的信息，
  // 当我们选择一个新的RSS源时，如果不清空会让人疑惑
  $scope.filterText = "";
  console.log("loadFeed / click event fired");
 
  if ($scope.currentButtonText == $scope.allFeeds[0].titleText)
  {
   //console.log($scope.feedSrc);
   url = $scope.feedSrc;
  }
 
   
  $scope.feedSrc = url;
  if (url === undefined || url === "")
  {
   $scope.phMessage = "Please enter a valid Feed URL & try again.";
   return;
  }
  console.log("button text: " + angular.element(e.target).text());
  console.log("value of url: " );
  console.log(url);
  FeedService.parseFeed(url).then(function(res){
   $scope.loadButonText=angular.element(e.target).text();
   $scope.feeds=res.data.responseData.feed.entries;
  });
 }

通过点击事件调用上面的函数时，我们先判断用户选择的信息与下拉框第一个选项 "Load (from textbox)"是否相同。 这么做是为了判断用户是否想加载文本框中提供的 RSS源。 如果是这样，我们调用FeedService.parseFeed  方法时，直接传入文本框中 URL值。如果不是这样，我们从相关的源对象中获取 URL。

结果列表

当源信息返回的时候,HTML代码使用另一个ng-repeat来迭代遍历每个项,并用友好的格式显示它们.HTML代码看起来像下面这样:
 

<ul class="unstyled">
 <span class="badge badge-warning top-buffer" ng-show="feeds.length > 0">{{(feeds | filter:filterText).length}} Items</span>
 <li ng-repeat="feed in feeds | filter:filterText">     
  <h5><a href="{{feed.link}}" target="_blank"><span class="titleText" >{{feed.title}}</span></a><span class="small"> {{feed.publishedDate}}</span></h5>          
  <p class="text-left">{{feed.contentSnippet}}</p>     
   
 </li>    
</ul>

HTML也创建了一个好友的标记,用来显示获取到的文本链接数.
搜索结果里的内容

它也显示了一个搜索文本框,可以用来输入文字,根据文本链接的内容来过滤下拉列表.
点击链接: 在新的页面加载

最后,如果你点击一个链接,它会在浏览器的新页面或窗口加载.这让这个工具很容易使用.

保存新的源

这个部分我做的很简单,因为我完成这个应用程序只是为了我自己使用.

如果你在文本框中输入一个URL,然后点击保存按钮(向下的箭头图标),你将看到一个JavaScript提示框,它看起来像下面展示的图片这样:

使用AngularJS制作一个简单的RSS阅读器的教程

你可以简单的输入标题(它将显示在下拉列表中)用来标识新的源,然后点击OK按钮.

只要你这么做了,这个项就会增加到下拉列表.这个过程通过增加这个项到allFeeds对象来实现,同时,这个项也将立即保存到localStorage之中.

这就是所有的内容.

希望你和我一样喜欢这个工具,它节省了很多时间.

发布提示

请注意许多外部库的链接是CDN的，除了下载的Bootstrap文件，其他下载的文件在一个3rdPartyLibs（第三方库）的目录里。你可以下载代码，解压和运行它们。
为本地存储准备Web服务器是必需的

你必须运行一个web服务器使它正常工作。注意，在下载的文件中已经包含一个精致小巧的web服务器（mongoose web server）和配置文件，因此，如果你希望使用它，你可以双击mongoose.exe，它就开始运行了，之后，你可以简单地加载： http://localhost:999/FreedReadR/ 它就从你的电脑上运行了。
 
最后一个要注意的是：那个【X】按钮是什么？

保存按钮后面的那个[X]按钮是什么？那个按钮允许你释放所有来自你的localStorage的反馈。如果你点击它，它们会被移除。被命名为反馈的localstorage条目就这样简单地被销毁了，所以要小心处理。如果你在添加任何反馈之前使用这个按钮，没有任何问题，否则你将会失去你已经添加的反馈。

我很懒，我使用它仅仅是为了我的测试，你还是应该把它去掉的。懒惰还真是一个伟大开发者的标志啊。

使用AngularJS制作一个简单的RSS阅读器的教程

- Author -

goldensun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery api 速查表分享
Jan 12 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
bootstrap读书笔记之CSS组件（上）
Oct 17 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 #Javascript
初步认识JavaScript函数库jQuery
Jun 18 #Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 #Javascript
浅谈Jquery核心函数
Jun 18 #Javascript
$.extend 的一个小问题
Jun 18 #Javascript
纯js实现无限空间大小的本地存储
Jun 18 #Javascript
JS实现当前页居中分页效果的方法
Jun 18 #Javascript
HDR(1) Vue3(1) 曝光融合(1) pycryto(1) 高动态范围(1) 连接器(1) shell脚本(1) kafka(2) 数据加密(1) axios(1)
You might like
paypal即时到账php实现代码
2010/11/28 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
vue resource发送请求的几种方式
2019/09/30 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍
2021/03/17 Javascript
五年后的职业生涯规划
2014/03/04 职场文书
开学典礼策划方案
2014/05/28 职场文书
校园绿化美化方案
2014/06/08 职场文书
会计岗位职责
2015/02/03 职场文书
节约用电通知
2015/04/25 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
《我在为谁工作》：工作的质量往往决定生活的质量
2019/12/27 职场文书