0

(Read carefully, this is a question about Wordpress and not about AngularJS)

I'm trying to make a single page application with AngularJS and the Wordpress rest API.

Many things that are usual when making a common theme (like template hierarchy, various settings, etc...) look like invalid in this case, unless I decide to reflect these aspects somehow.

Actually, I'm dealing with the page templates.

Now, the problem

Some pages need multiple HTTP calls to the REST API. By example, I have designed a slider for my home page; this can be configured through the theme customizer. Normally, I'd just use get_theme_mod() to get an array of slides to my page templates; in this SPA I created an endpoint to make it available through the API and loaded it using the $http service of AngularJS. Same things happen with anything that can be configured through customizer. Of course, this slows down the loading process.

I'd like to write my partials in PHP and have the Wordpress functions available there. This would reduce the number of calls drastically, but I couldn't find a way to do it.

It should be something that makes the template available through URL; I want to use PHP for what's equal to all the pages and angular data for what would change. Any help is appreciated.

EDIT Maybe the problem was not clear. What I actually do is using a controller for everything I need from the rest API. Controllers look like this one (yes, this one is angular code; exception handling was omitted to shorten it)

app.controller('allposts', function ($scope, $http) {
    $http.get('wp-json/wp/v2/posts?_embed&per_page=6').then(function (res) {
        $scope.status = res.status;
        $scope.posts = res.data;
    });
})
.controller('slider', function ($scope, $http) {
    $http.get('wp-json/ajst/v0/homeslider').then(function (res) {
        $scope.slides = res.data;
    });
    $scope.interval = 4500;
})
.controller('featuredproducts', function ($scope, $http) {
    $http.get('wp-json/ajst/v0/showcase').then(function (res) {
        $scope.products =  res.data;
    });
})

All of these have custom endpoints I created but go in a single template page. What I want is to use the first one (as much as similar controllers for single post and page), but load the other features using PHP WordPress functions.

And so? Well, the routing system makes what follows not so simple. Usually, posts are called using permalinks. I wrote an angular config that mirrors the permalink structure, so posts are still available using the same permalinks. But if I simply write a partial PHP template and load it, WordPress functions are not defined there (of course):

$routeProvider.when('/', {templateUrl: partials.folder + 'home.html', controller: 'allposts'});

(partals.folder was defined in functions.php file) The home.html is my template file with all those controllers. So, what I'm looking for, is to be allowed to use a PHP template that's recognized by Wordpress, but not through permalink. Thank you.

  • not sure what is the question here. you should make end points that deliver whatever you need in whatever manner is best for you. – Mark Kaplun Aug 11 '17 at 13:41
  • @Mark Kaplun Ok, imagine i have one endpoint for slider, another for ads, yet another for some help content box, then one to display a list of pages in first line. These, together with the partial template and the json data, make 6 http requests already, elonging loading times by probably 7-8 seconds. If this is what happens when i visit a post, then it is likely that slider, help box, etc...are the same for all posts, so i'd better use wordpress functions to that. But...i need some way to load that by wordpress route. – Daniele Squalo Aug 11 '17 at 14:22
  • so what is the problem with sending it in one request? it is not like anyone is forcing you to separate the requests.... you can probably have a big one for the initial load and other more granular ones for other context – Mark Kaplun Aug 11 '17 at 14:54
  • @MarkKaplun Templates need to be called by their URL directly. Doing so means that Wordpress should recognize them. Initially i thought to call the post link and write a post.php, but this interferes with the final link structure of the site. This forces me not even using wordpress functions atm, but html templates. It would be nice if i can make a template file that is recognized by WP, but is not the post.php – Daniele Squalo Aug 11 '17 at 21:24
  • in that case your problem is fully with angular, not wordpress. wordpress can return whatever you want it to return. If angular force you to use inefficient patterns, that is a a con item to using it (I am sure there are enough pro items). – Mark Kaplun Aug 12 '17 at 3:09
0

At the end, i solved it. To use php files as partials for angularjs routes, i had to include the file wp_load.php on them.

In code, on top of each partial:

<?php include_once('wp_load.php'); ?>

And i can now use wp functions wherever i want. Keep in mind that you need relative path, so you should adapt it to your situations. It was as simple as that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.