如何将 WordPress 与 Angular 8 集成到网站中？

Question

我正在尝试使用以下技术创建一个单页网站， - Angular 8+ - WordPress

我找不到很多资源来使用 Angular 8+ 处理 WordPress。大多数可用的资源/解决方案适用于 React 或 AngularJS。

到目前为止，我发现的内容仅显示了如何使用带有/wp-json/wp/v2/posts/端点的服务内部的 get 方法从 WordPress 网站获取数据。但是，我正在寻找的是从头开始创建网站。

任何关于此的指南或想法都会非常有帮助。我对此有很多疑问。

• 如果我设置本地 Angular 环境，我将如何在 WordPress 上使用它。

Answer 1

您可以在代码中手动完成这一切，而且您还可以找到某种插件来以这种方式提供帮助。我在我的编码生涯中使用过这两种方法。

看看WP-NG是一个自动引导 Angular 应用程序的插件。通过管理页面激活模块并直接使用指令。我已经在 2-3 个项目中使用过它。让我说，这显然取决于您的要求，您想要实现的目标。

Angular for WordPress - 免费 WP 插件库

以防万一，您仍然更喜欢代码以获得更广泛的方面。尝试这样的事情。

1) 设置 WordPress 和新主题 2) 将脚本放入主题中 3) 设置主题 4) 创建 AngularJS 应用程序

var myapp = angular.module('myapp', []);

// set the configuration
myapp.run(['$rootScope', function($rootScope){
  // the following data is fetched from the JavaScript variables created by wp_localize_script(), and stored in the Angular rootScope
  $rootScope.dir = BlogInfo.url;
  $rootScope.site = BlogInfo.site;
  $rootScope.api = AppAPI.url;
}]);

// add a controller
myapp.controller('mycontroller', ['$scope', '$http', function($scope, $http) {
  // load posts from the WordPress API
  $http({
    method: 'GET',
    url: $scope.api, // derived from the rootScope
    params: {
      json: 'get_posts'
    }
  }).
  success(function(data, status, headers, config) {
    $scope.postdata = data.posts;
  }).
  error(function(data, status, headers, config) {
  });
}]);

另外，你可以看看这个博客，我前几天在Quora上发现的，读起来很好。是的，它适用于 Angular 6，但可以在很多方面提供帮助。WordPress RestAPI 上的 Angular 6 博客