admin管理员组

文章数量:1122832

(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.

(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.

• templates
• rest-api

Share Improve this question edited Apr 20, 2019 at 21:38 Sami Ahmed Siddiqui 12933 bronze badges asked Aug 11, 2017 at 13:12 Daniele SqualoDaniele Squalo 17911 gold badge44 silver badges1818 bronze badges 8

• 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 Commented Aug 11, 2017 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 Commented Aug 11, 2017 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 Commented Aug 11, 2017 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 Commented Aug 11, 2017 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 Commented Aug 12, 2017 at 3:09

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 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.

本文标签： rest apiSingle page applications with Wordpress routes and templates