I am using angularjs to load a list of my wordpress posts, however I can not get any of my php functions to work with my partials file.
I've tried using something such as search.php instead of search.html but when doing so I get errors such as fatal error get_post_meta is undefined.
Now I know we are not suppose to mix client side with server side, and I can possibly use some kind of service to parse my php, but I have no idea how to go about it. I need my search.php to render my php tags so I can display custom fields, and use several php functions I have there.
Whats the best way of doing this?
On my page template (.php) I have --
<div id="page" ng-app="app">
<header>
<h1>
<a href="<?php echo home_url(); ?>">Search</a>
</h1>
</header>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div ng-Cloak ng-controller="MyController" class="my-controller">
<div ng-view></div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php rewind_posts(); ?>
<div ng-controller="OtherController" class="other-controller">
<div class="text-center">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="/partials/dirPagination.tpl.html"></dir-pagination-controls>
</div>
</div>
<footer>
© <?php echo date( 'Y' ); ?>
</footer>
</div>
And on my php file I want to be called into view has functions such as --
<?php
$pcomp1b = get_post_meta(get_the_ID(), 'pa_meta_comp1b', true);
$pcomp1c = get_post_meta(get_the_ID(), 'pa_meta_comp1c', true);
$pcomp1d = get_post_meta(get_the_ID(), 'pa_meta_comp1d', true); ?>
Math --
if( is_numeric( $price1 ) ) {
$a1 = $price1;
}
$b1 = $pcomp1d;
$sqft1 = str_replace( ',', '', $b1 );
if( is_numeric( $sqft1 ) ) {
$b1 = $sqft1;
}
$a2 = $pcomp2f;
$price2 = str_replace( ',', '', $a2 );
if( is_numeric( $price2 ) ) {
$a2 = $price2;
}
$b2 = $pcomp2d;
$sqft2 = str_replace( ',', '', $b2 );
if( is_numeric( $sqft2 ) ) {
$b2 = $sqft2;
}
$a3 = $pcomp3f;
$price3 = str_replace( ',', '', $a3 );
if( is_numeric( $price3 ) ) {
$a3 = $price3;
}
$b3 = $pcomp3d;
$sqft3 = str_replace( ',', '', $b3 );
if( is_numeric( $sqft3 ) ) {
$b3 = $sqft3;
}
$ppsqft1 = ROUND($price1 / $sqft1);
$ppsqft2 = ROUND($price2 / $sqft2);
$ppsqft3 = ROUND($price3 / $sqft3);
$ppsav = ROUND((($ppsqft1 + $ppsqft2 + $ppsqft3)/3));
$b4 = $property_area;
$parea = str_replace( ',', '', $b4 );
if( is_numeric( $parea ) ) {
$b4 = $parea;
}
$ehvp = $ppsav * $parea;
$homevalue = number_format($ehvp, 0, '.', ',');
echo '$' . $homevalue; ?>
And functions --
<?php if (class_exists('MRP_Multi_Rating_API')){ MRP_Multi_Rating_API::display_rating_result(array('rating_item_ids' => 2, 'show_count' => false, 'result_type' => 'value_rt', 'no_rating_results_text' => 'N/A'));} ?>
My app script --
var app = angular.module('app', ['ngRoute', 'ngSanitize', 'angularUtils.directives.dirPagination'])
function MyController($scope) {
$scope.currentPage = 1;
$scope.pageSize = 2;
$scope.posts = [];
$scope.pageChangeHandler = function(num) {
console.log('search page changed to ' + num);
};
}
function OtherController($scope) {
$scope.pageChangeHandler = function(num) {
console.log('going to page ' + num);
};
}
app.config(function(paginationTemplateProvider) {
paginationTemplateProvider.setPath('/partials/dirPagination.tpl.html');
});
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/search-results', {
templateUrl: myLocalized.partials + 'main.html',
controller: 'Main'
})
.when('/:ID', {
templateUrl: myLocalized.partials + 'content.html',
controller: 'Content'
});
})
app.controller('Main', function($scope, $http, $routeParams) {
$http.get('wp-json/posts?type=property').success(function(res){
$scope.posts = res;
});
})
app.controller('Content', function($scope, $http, $routeParams) {
$http.get('wp-json/posts?type=property/?filter["posts_per_page"]=25&filter["orderby"]=date&filter["order"]=desc/' + $routeParams.ID).success(function(res){
$scope.post = res;
});
});
app.controller('MyController', MyController);
app.controller('OtherController', OtherController);
So how can I get this to work with ng-view and my partials templates?
UPDATE
I do use wordpress api and I am aware of {{tag}} ... I need specific things done with php though. Is there a way to preprocess it into the partial files?
If you're wondering whether you can use PHP alongside Angular, the answer is yes. But Angular will still need a separate client-server architecture. In general, PHP runs on the server-side while Angular runs on the client-side.
Because Angular JS can be written inside the angle brackets of HTML that is why it is known as Angular JS .
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write.
If you want to include wordpress native functions in external php file (not default template file), you can load the wordpress default functions by loading wp-blog-header.php
or wp-load.php
into that file
like adding, require_once("/path/to/wordpress/wp-load.php");
at the very beginning.
You can refer the code below for $http request retrieving json data,
var app = angular.module('recentPost', []);
app.controller('PostController', ['$scope', '$http', function($scope, $http) {
$http.get('your_json_url')
.then(function(response) {
console.log( response );
/*if ( response.data !== '-1' ) {
$scope.lists= JSON.parse(response.data.data_received);
} else {
$scope.lists= response;
}*/
}
}]);
Additionally, I don't see the point of using AngularJS directly into wordpress, there's already jQuery+Ajax you can use, there's no point loading additional library
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With