How to use php (wordpress) functions in AngularJS partials files?
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
You can use php files for all the query related things and call that php file with some sort of ajax functionality and bind the response data to some div in Angular .. please find the example below :
<script type="text/javascript"> var sampleApp = angular.module('sampleApp', []); // Define new module for our application // Create new controller, that accepts two services $scope and $http function SampleCtrl($scope, $http) { $scope.date = "sample date"; // Bind data to $scope // Define new function in scope $scope.fetch = function() { // Use $http service to fetch data from the PHP web service $http.get('api.php').success(function(data) { $scope.date = data.date; // Bind the data returned from web service to $scope }); } }; SampleCtrl.$inject = ['$scope', '$http']; // Ask Angular.js to inject the requested services sampleApp.controller('SampleCtrl', SampleCtrl); // Initialize controller in pre-defined module </script>They have put all the php codes in api.php file and onsuccess binded the response data to $scope variable
Now when the button in the below will be pressed they will fetch the data from php file and put it in HTML file
<body ng-controller="SampleCtrl"> <div> <!-- When button is clicked the controller will use the fetch() in $scope <button ng:click="fetch()">Load date</button> <hr> <!-- {{date}} is bound to $scope.date and automatically updates when changed ($scope.fetch()) call --> <h1>Date is {{date}}!</h1> </div> </body>You can use this code as reference
Yes, there is a way to pre-process php into partial files.
From the command line:
cd /var/www/htmlphp calculate_prices.php > prices.tpl.htmlThat will dump the output of the PHP file into the prices.tpl.html file. .tpl.html is a naming convention standing for "html template".
Another way of getting the processed PHP output is navigating to that page in your google chrome and opening up Chrome Devtools. In the devtools panel go to the Elements page, find the div you are looking for, click it, and push CTRL + C. Then create the new file and paste it there.
Additionally, that all may be an unnecessary step: Try this
<div ng-include="'myfile.php'"></divNote that it has both double quotes and single quotes. The single quotes prevent it from looking for $scope.myfile.php, and instead directly loads that file.