創建一個Angularjs工廠來呈現WP REST API數據

Question

我正在嘗試創建一個Angular Factory，它將創建一個可注射對象，我可以在應用程序中的任何位置使用它。 我在WordPress主題中執行此操作。 工廠應該處理很多Javascript命令而無需太多代碼。

在我的assets / js / angular-theme.js中，我為主題創建了可注射物：

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

這應該與我的工廠一起使用，我試圖像在WordPress主題的functions.php文件中那樣入隊。 我將按照此處的說明進行操作：

https://docs.angularjs.org/api/ng資源

但似乎Google不再支持angular-resource.js的CDN

在這里自己看看：

https://docs.angularjs.org/api/ng資源

如果我是正確的，那么角度文檔中的說明似乎已過時。 無論如何，我繼續以這種方式開發文件：

資產/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'
        })
})

我的模板/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'));

?>

但是我沒有在瀏覽器上獲得WP REST API數據呈現。

Answer 1

既然您正在作為WordPress主題的一部分來執行此操作，並且到目前為止您沒有做任何事情，我要說的是，只是嘗試刷新頁面，以隱身方式打開頁面和/或關閉您的頁面如果您在本地使用MAMP或類似服務，請重新啟動服務器並重新啟動它。

看看是否有幫助，WordPress喜歡緩存。 如果這樣做確實有幫助，請妥善保存本指南以備將來參考： http : //www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/