现在,在我们深入了解应用程序具体做了些什么的时候,看看控制器提供的功能.看看在控制器中的每个函数,以便了解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);"。