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

简介

几年前，我用C#写了一个RSS阅读器，但我觉得如果做成SPA会更好。Angular让事情变得简单，RSS阅读器就是其中之一。我还用Twitter Bootstrap (UI)实现了RSS阅读器，调试页面样式是最难的地方之一.可能是因为我不擅长css。

背景

我有一些最喜欢的网站(代码项目、多布博士杂志、计算机世界公司杂志)。但是我发现很多网站都有烦人的广告，布局很差，真的不想看。当我说这些的时候，我没有包括CodeProject网站。

在这些网站之间来回切换会浪费很多时间。所以我比较喜欢浏览文章的标题和介绍，这样可以决定是否进入文章的内容页面。这就是为什么我决定写一个FreedReadR单页应用程序。

FreedReadR的响应速度相对较快，因为它读取的数据量(RSS提要)相对较小。

以下是单击代码项目选项的呈现方式：

以下是从某个站点加载数据的FreedReadR的渲染图：

您现在可以尝试这种效果：

http://newtonsaber.com/FreedReadR

我差点忘了，在创建自己的RSS阅读器之前，我在谷歌上搜索了这个想法，并在JS小提琴中找到了一个更好的代码：angularJS Feed Reader alt。

我的代码和它的代码有相似之处，但还是有区别，因为我想实现更多的功能。FreedReadR允许您在本地存储自己的RSS提要数据，这样您就可以始终使用应用程序来创建自己的RSS提要。此外，它的代码是基于Twitter Bootstrap 2的，FreedReadR是基于新版本的Twitter Bootstrap 3的。使用代码

如果你熟悉Angular，开发中的代码并不多。大部分困难是在Angular中使用Bootstrap。

其他问题可以在“角度编程思想”中解决。$scope的用法与控制器的工作方式有些不同。首先，您必须在html中设置应用程序的范围。类似于下面使用ng-app=' freedredr '的代码，html中$scope的作用域被设置：div标签中的所有对象-下面示例中的作用域是整个页面。我只需要一个控制器来处理整个应用逻辑，对此我很满意。

body ng-app=' free无畏' div data-ng-controller=' Feed ctrl ' h4RSS Feed Reader使用AngularJS/H4 form class=' form-horizontal col-MD-12 '角色=' form ' div class=' row ' div class=' col-MD-6 '在上面的html代码中，可以看到Angular应用程序模板的名称是free无畏。当我设置应用程序模板并添加控制器(FeedCtrl)代码时，我在main.js文件中使用了相同的名称。让我们看看main.js中设置参数的代码

var app=angular . module(' FreeReader '，[])；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 _ CALLBACKq=' encodeURIComponent(URL))；} }});app.controller('FeedCtrl '，['$scope '，' FeedService '，feed ctrl])；在上面的js代码中，第一行是创建一个AngularJS应用程序模板。请注意，它的名称是FreedReadR，我们在html代码中使用相同的名称来引用这个模板。

接下来，我们创建一个Angular工厂类，它将用于访问RSS提要URL以获取真实的源数据。仔细查看代码中使用的$http.jsonp请求。网址格式如下：

//Ajax . googleapi.com/Ajax/services/feed/load？v=1.0 num=50 callback=JSON _ callbackq=在URL中调用了Google API，但是之前不知道Google API。这是我在文章开头提到的js小提琴示例的主要代码。如果你想了解更多关于谷歌应用编程接口的信息，你可以在这里下载：https://developers.google.com/feed/v1/jsondevguide.

在上面的js代码中，您会发现我们已经调用了encodeURIComponent函数，该函数用于转换URL。配置角度控制器

控制器用于处理应用程序的逻辑，因此大多数js功能应该在控制器内部。这就是Angular如何帮助你组织(混乱的)js代码。我刚才大声说了吗？

好吧，JavaScript鼓励混乱，不是吗？这是不好的一面。说到JavaScript的全局变量，你不害怕尖叫吗？如果没有，那么我们可能不得不吊销你的开发者许可证。你有写软件的权限，不是吗？(译者注：因为你有开发者许可证，你自然会尖叫着恐惧地说JavaScript的‘全局变量’——这里有一些夸张的说法，意思是开发者应该对JavaScript‘全局变量’的使用有所顾忌。)

现在，当我们深入了解应用程序所做的工作时，让我们来看看控制器提供的功能。让我们看看控制器中的每一个功能，以了解FreedReadR可以做什么。检查本地存储并加载它(如果存在)。

我想做的一件事是，我想让你把你的源代码保存在浏览器的slocalStorage中。我不想通过设置数据库来制造混乱，但我希望您可以添加自定义源，并使它们始终在您的浏览器中可用。

当然，localStorage的局限性在于它存在于特定浏览器的给定域名中。

这意味着，如果您从NewtonSaber.com/FreedReadR运行应用程序并保存一些定制的源，当您从浏览器打开初始连接时，您将只能在列表中再次看到这些内容。每个浏览器的本地存储都是私有的。因此，如果你某一天使用IE添加了一些源，那么第二天你将无法使用Chrome查看添加的源。

就我个人而言，这个版本的应用还可以。因为这是我想要的，所以我们应该从一种速度非常快并且理解其局限性的技术开始。纠正这些限制可能是未来另一篇文章的内容。

您会发现，在控制器代码中，我首先调用了一个函数：retrieveFromLocalStorage()。

功能如下：

函数retrievefromLocalstorage(){ $ scope . all feeds=[]；console.log('正在检索localStorage . ');尝试{ $ scope . all feeds=JSON . parse(local storage[' feeds '])；console . log($ scope . all feeds . length)；//console . log(JSON . stringify($ scope . all feeds))；if($ scope . all feeds===null){ console . log('无法检索feeds ')；loadDefaultFeeds()；} } catch(ex){ console . log(' ex : ' ex)；loadDefaultFeeds()；saveToLocalStorage($ scope . all feeds)；}}这是一个非常简单的函数。它在$scope的范围内定义了一个名为allFeeds的数组变量。然后，通过JSON.parse方法从localStorage数组中读取一个feeds对象，该对象存储现有的RSS feeds。如果feeds对象未定义(这是第一次运行应用程序)，程序将引发异常。当抛出异常时，应用程序将加载一些默认的RSS提要(loadDefaultFeeds())，然后将这些提要保存到localStorage以供下次使用。

先看loadDefaultFeeds()函数，然后我们再看saveToLocalStorage()函数。

函数loadDefaultFeeds(){ $ scope . all feeds=[{ title text : ' Load(from textbox)'，url:''}，{titleText:'CodeProject C# '，URL : ' http://www . code project.com/web services/articles RSS . aspx？cat=3'}，{ title text : ' computer world-News '，URL : ' http://www.computer world.com/index . RSS ' }，{titleText:'Dr. Dobb's '，URL : ' http://www . drdobbs.com/RSS/all ' }，{ title text : ' info world Today ' News '，URL : ' 3http://www . info world.com/News/}如您所见，我添加了一些我最喜欢的来源，以便您可以轻松尝试此应用程序。它只是一个对象数组，由titleText和url定义。

只要将它们加载到$scope类型的变量allFeeds中，就可以使用ng-repeat从HTML中获取它们，如下所示：

Li ng-repeat=' feed in all feeds ' a href=' # ' ng-click=' LoadFeed($ event，feed . URL)；'{ { feed . title text } }/a/LiTs创建一个选项列表，当您单击下拉框按钮时，将显示该列表。如您所见，我们在ng-repeat语句中引用了allFeeds $作用域变量，然后引用了feed。生成条目的titletext。

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

我说过我会向您介绍saveToLocalStorage()方法。现在让我们来看看。

函数saveToLocalStorage(feeds) { //将对象放入存储localStorage.setItem('feeds '，angular . to JSON(feeds))；console . log(angular . to JSON(feeds))；console.log('已将提要写入local storage ')；}这是一个非常简单的方法。方法允许您传入feed对象(这应该是feed对象的数组)。然后我们简单地调用localStorage.setItem()方法。正如方法的名字所说，我们可以使用这个方法来保存对象。请注意，当我们保存对象时，我们调用对象的angular.toJson()方法。这是一种帮助我们摆脱棱角性的一些特殊属性的方法，我们不想保存。因此，调用这个方法非常重要，因为angular会在对象中保存一些唯一的属性，这会让您感到困惑。

现在，应用程序已经加载了一些默认的RSS提要。如果你想获取某个RSS提要的数据，点击下拉框按钮，选择其中一个值，然后应用程序会运行下面的代码来获取相关数据。我们在$scope的范围内添加了一个loadFeed函数。功能如下。将调用以下函数，因为我们绑定了事件ng-click=' loadfeed ($ event，feed . URL)；'。

loadFeed=function(e，URL){ $ scope . current button text=angular . element(e . target)。text()；//清空过滤器文本框中最后显示的信息。//当我们选择一个新的RSS提要时，它会让人怀疑它是否没有被清空。$ scope.filterText=console.log('loadFeed/click事件已激发')；if($ scope . current button text==$ scope . all feeds[0]。title TExT){//console . log($ scope . FeedSrc)；url=$ scope.feedSrc} $ scope.feedSrc=url如果(url===未定义| | url==' '){ $ scope . phmessage='请输入有效的提要URL，然后重试'；返回；} console . log(' button text : ' angular . element(e . target)。text())；console . log(' URL :的值')；console . log(URL)；FeedService.parseFeed(url)。然后(function(RES){ $ scope . loadbutontext=angular . element(e . target)。text()；$ scope . feeds=RES . data . response data . 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 : filter text)。length } } Items/span Li ng-repeat=' feed in feed | filter : filter text ' H5 a href=' { { feed . link } } ' target=' _ blank ' span class=' title text ' { feed . title } }/span/Aspan class=' small ' { feed。publisheddate } }/span/H5 p class=' text-left“{ feed。contentsnippet}}/p/Li/ul html还创建了一个friend标记，用于显示获得的文本链接数量和搜索结果中的内容

它还显示一个搜索文本框，可用于输入文本，并根据文本链接的内容过滤下拉列表。单击链接：将其加载到新页面

最后，如果您点击一个链接，它将被加载到浏览器的新页面或窗口中，这使得该工具易于使用。

保存新来源

我把这一部分做得非常简单，因为我完成这个应用程序只是为了自己使用。

如果您在文本框中输入网址，然后单击保存按钮(向下箭头图标)，您将看到一个JavaScript提示框，如下图所示。

您可以简单地输入标题(将显示在下拉列表中)来识别新来源，然后单击“确定”。

只要您这样做，该项目将被添加到下拉列表中。这个过程是通过将这个项目添加到allFeeds对象来实现的，同时，这个项目将被立即保存到localStorage。

以上就是全部内容。

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

发布提示

请注意，外部库的很多链接都是CDN，除了下载的Bootstrap文件，其他下载的文件都在3rdPartyLibs目录下。你可以下载代码，解压并运行它们。有必要为本地存储准备一个网络服务器

您必须运行web服务器才能正常工作。注意，下载的文件已经包含一个精致小巧的web服务器和配置文件。因此，如果你想使用它，你可以双击mongoose.exe，它将开始运行。之后，您只需加载：http://localhost :999/free dreder/它就会从您的计算机上运行。最后要注意的是：[x]按钮是什么？

保存按钮后的[X]按钮是什么？该按钮允许您释放本地存储的所有反馈。如果你点击它，它们将被删除。名为feedback的localstorage条目被简单地破坏了，所以要小心。如果您在添加任何反馈之前使用此按钮，则没有问题，否则您将丢失您已经添加的反馈。

我很懒。我只用它来做测试。你应该扔掉它。懒惰真的是一个伟大开发者的标志。