歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

使用 AngularJS 創建的 RSS 閱讀器 —— FreedReadR

下載所有的源碼和mongoose web服務器 – 538.1 KB

------------------------------------------分割線------------------------------------------

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/9月/20日/使用 AngularJS 創建的 RSS 閱讀器 —— FreedReadR

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

------------------------------------------分割線------------------------------------------

簡介

幾年前,我用C#寫了一個RSS閱讀器,但是我想如果把它做成一個SPA(單頁應用)效果會更好。 Angular使一些事情變得簡單,RSS閱讀器就是其中之一。 我也用Twitter Bootstrap(做UI)實現了RSS閱讀器,調試頁面樣式是最難的地方之一...可能是因為我不擅長css的原因。

背景

我有一些自己喜歡的網站( CodeProject, Dr.Dobb's Journal, ComputerWorld, Inc. Magazine)。 然而,我發現其中很多網站都有煩人的廣告、風格不好的布局,我實在不願意看到這些東西。當我說這話的時候,並不包括 CodeProject網站。

在這些網站之間來回切換浪費了很多時間。 因此我更喜歡浏覽文章標題和簡介,這樣我可以決定是否進入文章內容頁面。 這就是我決定寫FreedReadR 單頁應用的原因。

FreedReadR 響應是比較快的,因為它讀取的數據量(RSS源)比較小。

下面是點擊CodeProject選項的效果圖:

下面是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

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.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中供下次使用。

Copyright © Linux教程網 All Rights Reserved