How to integrate WordPress with Angular 8 for website?

You can do it all manual in code and also, you can find some sort of plugin to assist in this manner. I have utilized both methods in my coding career.

Have a look on WP-NG is a plugin to automatic bootstrap angular application. Activate module by admin page and use directly directive. I have used this in 2-3 projects. Let, me say it clearly depends on your requirement, what you want to achieve.

Angular for WordPress – Free WP Plugin Library

In case, you are still preferring code for broader aspect. Try something like this.

1) Setup WordPress and a new theme 2) Enqueue scripts in the theme 3) Setup the theme 4) Create the AngularJS application

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) {
  });
}]);

Also, you can give a look on this blog, I found it on Quora some days back, its good to read. Yeah its for Angular 6 but can help in many ways. Angular 6 blog on WordPress RestAPIs

Leave a Comment