[英]creating an Angularjs factory to render WP REST API data
我正在尝试创建一个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数据呈现。
既然您正在作为WordPress主题的一部分来执行此操作,并且到目前为止您没有做任何事情,我要说的是,只是尝试刷新页面,以隐身方式打开页面和/或关闭您的页面如果您在本地使用MAMP或类似服务,请重新启动服务器并重新启动它。
看看是否有帮助,WordPress喜欢缓存。 如果这样做确实有帮助,请妥善保存本指南以备将来参考: http : //www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.