doudi7782 2017-10-29 13:47
浏览 75
已采纳

创建Angularjs工厂以呈现WP REST API数据

I am trying to create an Angular Factory which will create an injectable object to which I can use anywhere in my application. I am doing this inside a WordPress theme. The factory is supposed to handle a lot of the Javascript commands without much code.

In my assets/js/angular-theme.js I created the injectable for my theme:

var wpApp = new angular.module('wpAngularTheme', ['ui.router', 'ngResource']);

This should work with my factory, I attempted to enqueue as should be done inside the functions.php file of a WordPress theme. I was about to follow the instructions here:

https://docs.angularjs.org/api/ngResource

but it seems Google no longer supports the CDN for angular-resource.js

See for yourself here:

https://docs.angularjs.org/api/ngResource

If I am correct, then it seems the instructions in the angular doc may be out of date. Anyway, I continued on and developed my files in this manner:

assets/js/angular-theme.js:

// To use $resource inside your controller/service you
// need to declare a dependency on $resource.
var wpApp = new angular.module('wpAngularTheme', ['ui.router', 'ngResource']);

//The next step is calling the $resource() function with your REST endpoint.
// This function call returns a $resource class representation which can be
// used to interact with the REST backend. The Posts function is to take the new
// Injectable called $resource
wpApp.factory('Posts', function($resource){
    return $resource(appInfo.api_url + 'posts/:ID', {
        ID: '@id'
    })
});

wpApp.controller('ListCtrl', ['$scope', 'Posts', function($scope, Posts) {
    console.log('ListCtrl');
    $scope.page_title = 'Blog Listing';
    Posts.query(function(res){
        $scope.posts = res;
    });
}]);

 wpApp.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('list', {
            url: '/',
            controller: 'ListCtrl',
            templateUrl: appInfo.template_directory + 'templates/list.html'
        })
})

My templates/list.html:

<h1>{{page_title}}</h1>

<pre><code>{{posts | json}}</code></pre>

functions.php:

<?php

class wp_ng_theme {

    function enqueue_scripts() {

        wp_enqueue_style('bootstrapCSS', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', array(), '1.0', 'all');
        wp_enqueue_script('angular-core', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js', array('jquery'), '1.0', false);
        wp_enqueue_script('angular-resource', 'https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.6/angular-resource.js', array('angular-core'), '1.0', false);
        wp_enqueue_script('ui-router', 'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js', array('angular-core'), '1.0', false);
        wp_enqueue_script('ngScripts', get_template_directory_uri() . '/assets/js/angular-theme.js', array('ui-router'), '1.0', false);
        wp_localize_script('ngScripts', 'appInfo',
            array(

                'api_url'           => rest_get_url_prefix() . '/wp/v2/',
                'template_directory'    => get_template_directory_uri() . '/',
                'nonce'         => wp_create_nonce('wp_rest'),
                'is_admin'          => current_user_can('administrator')
            )
        );
    }
}

$ngTheme = new wp_ng_theme();
add_action('wp_enqueue_scripts', array($ngTheme, 'enqueue_scripts'));

?>

But I am not getting the WP REST API data rendering on the browser.

  • 写回答

1条回答 默认 最新

  • duanrang2627 2017-10-29 15:30
    关注

    Being that you are doing this as part of a WordPress theme and I don't see anything wrong with what you have done so far, I am going to say, just try refreshing your page, opening it in incognito and/or shutting down your server and restarting it if you are working locally with MAMP or similar service.

    See if that helps, WordPress loves to cache. If this does help, keep this guide handy for future reference: http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决