javascript - 将 Wordpress 博客文章拉入 Angular JS

Question

我想从类似于 http://blog.neosavvy.com/?feed=rss2 的内容中提取博客提要用于不在同一域中的 Angular 应用程序。

我打算使用 ProxyPass，但是 ProxyPass 不能与/?feed=rss2 一起使用。是否有重写规则可以用来避免 Javascript 在获取不在同一 URL 中的内容时出现的跨域问题。

我使用 AngularJS 的服务来获取提要内容，就像使用任何其他服务一样。

这是我用来获取博客 rss 的代码:

$scope.getBlogPost = function() {
    $http({method:'GET', url:'http://blog.neosavvy.com/?feed=rss2'}).
        success(function (data, status, headers, config) {
            console.log("data returned");
        }).
        error(function (data, status, headers, config) {
            console.log("data not returned");
        });
}

这是我收到的错误 - 因此需要代理通行证或其他替代方法。

XMLHttpRequest 无法加载 http://blog.neosavvy.com/?feed=rss2 .产地http://local.something.com Access-Control-Allow-Origin 不允许。

Answer 1

你可以使用类似 YQL 的东西或 Google Feed API

我用后者做了一个例子，你可以在这里查看:http://plnkr.co/edit/Plb1fz?p=preview

您可以使用 Google Feed API 而不是使用 $http 服务，您的 Controller 将如下所示

app.controller('ctrl', function($scope) {
  var feed = new google.feeds.Feed("http://blog.neosavvy.com/?feed=rss2");
  feed.load(function(result) {
    $scope.$apply(function(){
      $scope.entries = result.feed.entries;
    })
  });
});

请注意，由于范围从 Angular 外部更改，因此需要调用 $apply 来通知 Angular。

一些注意事项，首先您需要将以下脚本添加到您的文档中

• https://www.google.com/jsapi
• angular-sanitize.min.js

然后，由于必须首先加载 Google Feed API，因此有必要手动引导您的 Angular 应用

google.load("feeds", "1");
google.setOnLoadCallback(function(){     
    angular.bootstrap(document.body, ['app']);
});

由于提要包含 html，您将 ngSanitize 模块声明为依赖项

var app = angular.module('app', ['ngSanitize']);

要显示提要中的条目，您可以使用 ngRepeater 遍历收到的条目，当然还可以使用 ng-bind-html 指令清理 html .

<div ng-repeat='entry in entries'>
  <h1>{{entry.title}}</h1>
  <div ng-bind-html= "entry.content"></div>
</div>