Use WordPress as a CMS in an AngularJS application

FantasyBet is mostly an AngularJS application, but parts do not form the application itself. We could hard-code these into HTML files loaded through Angular, but that’s a bit last-century. We could have built something custom to feed the data through, but that’s a big wheel to re-invent.

Enter WordPress…

Since we use WordPress and Advanced Custom Fields so often, that was the obvious choice. Rather than using something like Thermal to pass the content as raw data we pass the rendered template. This means we avoid rebuilding the templates in PHP (for Google) and Javascript (for browsers.)

WordPress passes a list of its page URLs to the Angular router along with the requested page. All WordPress templates load the Angular Application, so no matter what the entry point is, there are no page reloads. When the user requests another CMS page, the routing requests the page with ?content appended to the URL. This tells WordPress to omit the header and footer, leaving only the new content, for example:

angular.module('app').config(['$routeProvider', function($routeProvider) {
   $routeProvider.when("/help", {
       templateUrl: "/help?content"
   });
}]);

Without this Angular loads into the ng-view and causes an infinite loop.

FantasyBet.com using AngularJS and WordPress