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/ngResource

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

在这里亲自看看：

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

如果我是正确的，那么角度doc中的说明似乎已经过时了。无论如何，我继续以这种方式开发我的文件：

资产/ JS /角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/

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

1 个答案: