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> <span ng-show="feeds.length > 0">{{(feeds | filter:filterText).length}} Items</span> <li ng-repeat="feed in feeds | filter:filterText"> <h5><a href="https://www.jb51.net/{{feed.link}}" target="_blank"><span >{{feed.title}}</span></a><span> {{feed.publishedDate}}</span></h5> <p>{{feed.contentSnippet}}</p> </li> </ul>
HTML也创建了一个好友的标记,用来显示获取到的文本链接数.
搜索结果里的内容
它也显示了一个搜索文本框,可以用来输入文字,根据文本链接的内容来过滤下拉列表.
点击链接: 在新的页面加载
最后,如果你点击一个链接,它会在浏览器的新页面或窗口加载.这让这个工具很容易使用.
保存新的源
这个部分我做的很简单,因为我完成这个应用程序只是为了我自己使用.
如果你在文本框中输入一个URL,然后点击保存按钮(向下的箭头图标),你将看到一个JavaScript提示框,它看起来像下面展示的图片这样:
你可以简单的输入标题(它将显示在下拉列表中)用来标识新的源,然后点击OK按钮.
只要你这么做了,这个项就会增加到下拉列表.这个过程通过增加这个项到allFeeds对象来实现,同时,这个项也将立即保存到localStorage之中.
这就是所有的内容.
希望你和我一样喜欢这个工具,它节省了很多时间.
发布提示
请注意许多外部库的链接是CDN的，除了下载的Bootstrap文件，其他下载的文件在一个3rdPartyLibs（第三方库）的目录里。你可以下载代码，解压和运行它们。
为本地存储准备Web服务器是必需的
你必须运行一个web服务器使它正常工作。注意，在下载的文件中已经包含一个精致小巧的web服务器（mongoose web server）和配置文件，因此，如果你希望使用它，你可以双击mongoose.exe，它就开始运行了，之后，你可以简单地加载： :999/FreedReadR/ 它就从你的电脑上运行了。
最后一个要注意的是：那个【X】按钮是什么？
保存按钮后面的那个[X]按钮是什么？那个按钮允许你释放所有来自你的localStorage的反馈。如果你点击它，它们会被移除。被命名为反馈的localstorage条目就这样简单地被销毁了，所以要小心处理。如果你在添加任何反馈之前使用这个按钮，没有任何问题，否则你将会失去你已经添加的反馈。
我很懒，我使用它仅仅是为了我的测试，你还是应该把它去掉的。懒惰还真是一个伟大开发者的标志啊。
您可能感兴趣的文章: