迷茫于AngularJS和WordPress

时间:2016-08-23 作者:JoaMika

好的,我已经创建了一个自定义的post类型,并安装了相关的REST插件,还有一个工作的JSON提要。

我接下来要做什么?

基本上,我想在现有wordpress页面上显示JSON提要的一部分,有点像wp_query 我想是吧。

AngularJS能做到这一点吗?我还没有找到任何有用的教程。任何指向正确方向的指针都会有所帮助。

2 个回复
SO网友:Jesús Franco

不幸的是,我不知道Angular是否能帮到你,但我发现这个问题与另一个有关consuming an endpoint with a filter by meta_key (顺便说一句,我用一个非常简单的只支持jQuery的代码更新了我之前的回复,以显示在列表中检索到的帖子)。

然而,如果你不介意另一个库的例子,我用React(学习曲线比Angular小)学习我的第一步,这是一个简单的函数,可以在一个简单的小部件中显示最近发布的帖子。

(function ( $ ) {
    var resourceUrl = \'http://example.com/wp-json/wp/v2/posts/\';
    function refreshLastEntries() {
        var results = [];
        var link, item;
        $.get(
            resourceUrl,
            function (response) {
                console.log("Received " 
                    + response.length + " elements");
                for(item = 0; item < response.length; item++) {
                    link = React.DOM.p({}, React.DOM.a({
                        style:{"textDecoration":"none"},
                        href:response[item].link
                    }, response[item].title.rendered));
                    results.push(link);
                }
                ReactDOM.render(React.DOM.div({}, results),
                    document.getElementById(\'reactor\'));
            }
        );
        setTimeout(refreshLastEntries, 10000);  
    }
    refreshLastEntries();

})(jQuery);
如果你really 想要学习如何将REST API与Angular结合使用,我建议您再次访问我在另一个问题中链接到您的博客,因为这位女士有一个完整的提要Using AngularJS and JSON API in Your WordPress Theme.

SO网友:mediaguru

是的,这是可以做到的。您必须在angular JS中学习$http。在控制器或指令中包含$http。然后你可以做下面这样的事情。页面ID 199是我的一个网站的“关于”页面:

 var url = config.API_URL + "/wp-json/wp/v2/pages/199";
 $http.get(url)
   .then(function(response) {
        $scope.page = response.data;
   },
  function error(d) {
        $scope.error = true; // use to show an error message
  });
$范围。页面包含页面中的数据。然后,在html中可以如下所示显示:

 <h1>{{page.title}}</h1>
 <div>{{page.content}}</div>