使用 AngularJS 创建的 RSS 阅读器(2)

            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中供下次使用。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/e49531033ea7dbdd749cec5c812f4004.html