Passing php variable to angular

Question

Passing php variable to angular

I am creating a webapp and I am using angular for the first time. Yesterday I tried to get data from the API, but it will not work in angular due to Cross-Cross resource restrictions. Lucky I can get json date through a simple CURL request in PHP.

So here I am. I have JSON data in a PHP variable and you want to use this data in my angular application. How can i achieve this? Is there a way to transfer data directly to angular? Or should I create a json file with php and then load it into my function? What are your suggestions?

I want to populate $ scope.posts with the contents of the php variable of the $ content variable.

Here's the php code:

<?php /* gets the data from a URL */ function get_data($url) { $ch = curl_init(); $timeout = 5; curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $data = curl_exec($ch); curl_close($ch); return $data; } $returned_content = get_data('http://fingerzeig.ch/api/agenda/list'); $content = json_decode($returned_content); //print_r ($content); //Get first title //$firstitle = $content[0] -> ID; //print_r($firstitle); ?>

Angular Code:

 //MYAPP var app = angular.module("MyApp", []); app.controller("PostsCtrl", function($scope, $http) { $http.get(' WHAT SHOULD GO HERE? '). success(function(data, status, headers, config) { console.log("success!"); console.log(data); $scope.posts = data; }). error(function(data, status, headers, config) { // log error }); });

+5

json javascript angularjs php curl

elpeyotl Nov 13 '14 at 20:34

source share

4 answers

Thank you all for your help. It works and the solution was very simple.

I created a variable in Javascript that gets the returned content of PHP.

 var thedata = <?php echo $returned_content;?>;

Then I put this variable in the angular application file:

 //MYAPP var app = angular.module("MyApp", []); app.controller("PostsCtrl", function($scope) { $scope.posts = thedata; console.log(thedata); });

Now I can access this data in my ng repeat.

 <body ng-app="MyApp"> <div ng-controller="PostsCtrl"> <ul ng-repeat="post in posts"> <li>{{post.ID}}</li> </ul> </div> </body>

It works sweetly! A very simple solution.

+4

elpeyotl Nov 14 '14 at 10:11

source share

Since you are already receiving JSON data, simply output the JSON data. No need to do json_decode.

So just echo $returned_content

Edit:

The $http.get(' WHAT SHOULD GO HERE? ') Section in the Angular code should include the relative URL of the PHP page. for example, if your PHP page is available at http://server.com/webapp/get_data.php , then your Angular will be $http.get('/webapp/get_data.php')

0

creanium Nov 13 '14 at 20:39

source share

You could just make it span this scale, not sure if this is the best practice, but I ... Or you could call the angular controller call for the php function in

 $http.get('func').then(function(data) { //do stuff });

or just run it in the area

 <input ng-model="myContent" value="<?php echo $returned_content?>"/>

0

Mutmatt Nov 13 '14 at 20:46

source share

Steve adams · Accepted Answer · 2014-11-13T21:48:31+0000

You can provide an endpoint using apache and php to get this data from your own server:

 $http.get('/endpoint', function () { ... });

You can also do something, sometimes called “loading” data into the DOM. This works fine - I usually do this to ensure that the first page of the application loads with a single page, without requiring waiting for the source data. Everything for loading the first page is configured on the server and is displayed on the page for the collection application without making further requests:

To do this, you can create a collection in a window or global area as follows:

 window.myPostData = "<?php echo $data; >";

Then in your application, you can usually expect that the window object (or any global variable) will be available in the browser at any time, so it will be available as follows:

 app.controller("PostsCtrl", function($scope) { var posts = window.myPostData; });

However, you probably also want to access new data, so you are likely to try something like this:

 // If $data is empty, set myPostData to false. window.myPostData = <?php echo empty($data) ? 'false' : $data; >; ... app.controller("PostsCtrl", function($scope, $http) { var posts = window.myPostData; // Set myPostData to false so future use of this controller during this // request will fetch fresh posts. window.myPostData = false; // Now if we didn't bootstrap any posts, or we've already used them, get them // fresh from the server. if (!posts) { $http.get('/endpoint', function() { ... }); } });

Keep in mind, if you don’t have an understanding of how to configure the endpoint using apache and php, you will only need to load the data into a window or global variable. This is not perfect, but it will work.

Passing php variable to angular

More articles: