I'm starting with AngularJS and I want to use it in my WordPress site.
I'm trying to print a table with the data of a table in my WordPress database but I can't access to the WordPress functions and variables.
This following is some of my code.
page-demo.php
<?php
/*
* Template Name: Demo
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script language="JavaScript"
src="<?php echo get_option('siteurl')?>/wp-content/themes/theme1200/js/app.js"></script>
<script language="JavaScript"
src="<?php echo get_option('siteurl')?>/wp-content/themes/theme1200/js/smart-table.min.js"></script>
<meta name="description"
content="Basic AngularJS example of data binding" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body >
<div ng-app="myApp" ng-controller="mainCtrl">
<h3>Basic Smart-Table Starter</h3>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.NOMBRE}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<?php
get_footer();
?>
app.js
angular.module('myApp', [ 'smart-table' ]).controller('mainCtrl',
function($scope, $http) {
$http.get('../wp-content/themes/theme1200/model/model.php').
success(function(data) {
$scope.rowCollection = data;
})
});
model.php
<?php
global $wpdb;
//$query = "SELECT * FROM JUGADOR";
//$resultado = $wpdb->get_results($query);
$sql = "SELECT APELLIDOS, NOMBRE, HANDICAP FROM JUGADOR ORDER BY APELLIDOS";
$res = $wpdb->get_results($wpdb->prepare($sql));
$result = $res->fetchAll( PDO::FETCH_ASSOC );
# JSON-encode the response
$json = json_encode( $result );
echo $json;
?>
But I'm having an error when it execute the following line.
$res = $wpdb->get_results($wpdb->prepare($sql));
I think that this file can't access to wordpress functions and variables.
Can anybody help me?
You are correct in thinking that your script does not have access to Wordpress functions and variables. Running a php script directly like that will mean Wordpress is not set up.
A better approach is to hook in to Wordpress and set up urls which will return the data you want from there, for Angular to use. There are a couple of different ways you can go about this.
There is a Wordpress REST API which can be used with the likes of Angular. It allows you to get data very easily, but the focus is on core Wordpress data not a custom databse. But it's worth a look.
Another is to create your own endpoint, which will allow you to return whatever you want from a given url. Here is an article looking at that approach.
It is always best to use the ajax functions built into wordpress.
Setting up ajax. I have used it outside of plugins. It works the same.
Here is a rough version of the code
This adds code to footer.php. You could also enqueue your script in a separate js file (highly recommended). In either case you want to read the ajaxurl
add_action( 'wp_footer', 'my_action_javascript' ); // Write our JS below here
function my_action_javascript() { ?>
<script type="text/javascript" >
angular.module('myApp', [ 'smart-table' ]).controller('mainCtrl', function($scope, $http) {
$http.get(ajaxurl).
success(function(data) {
$scope.rowCollection = data;
})
});
</script> <?php
}
Then in your functions.php add the following.
add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
global $wpdb;
$sql = "SELECT APELLIDOS, NOMBRE, HANDICAP FROM JUGADOR ORDER BY APELLIDOS";
$res = $wpdb->get_results($wpdb->prepare($sql));
$result = $res->fetchAll( PDO::FETCH_ASSOC );
# JSON-encode the response
$json = json_encode( $result );
echo $json;
}
That should get you most of the way there. Check the link and it should help you tweak it.