Passare una variabile php ad angolare

Question

Sto costruendo una webapp e sto usando angolare per la prima volta. Ho provato ieri a ottenere i dati da un'API ma non funzionerà in Angular causa di restrizioni delle risorse di origine incrociata. Fortunatamente posso ottenere la data JSON su una semplice richiesta CURL in PHP.

Quindi eccomi qui. Ho i dati JSON in una variabile PHP e voglio usare questi dati nella mia applicazione angolare. Come posso ottenerlo? C'è un modo per passare i dati direttamente all'angolare? O dovrei creare un file JSON con PHP e poi caricarlo nella mia funzione? Che suggerimenti hai?

Voglio riempire $ scope.posts con il contenuto della variabile $ del contenuto php.

Ecco il codice PHP:

<?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); 



     ?> 

Il codice angolare:

//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 
    }); 
}); 

Answer 1

si potrebbe fornire e endpoint con Apache e PHP per ottenere questi dati dal proprio server:

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

Si potrebbe anche fare qualcosa a cui talvolta si fa riferimento come dati di "bootstrap" nel DOM. Funziona bene, in genere lo faccio per garantire che il caricamento della prima pagina di un'app per singola pagina non richieda l'attesa dei dati iniziali.Tutto per il caricamento della prima pagina è impostato sul server e reso nella pagina per l'app da raccogliere senza ulteriori richieste:

Per fare ciò, è possibile creare una raccolta sulla finestra o su un ambito globale come questo:

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

Poi, più tardi nella vostra applicazione, in genere è possibile aspetta l'oggetto finestra (o qualsiasi variabile globale) siano disponibili nel browser in ogni momento quindi sarà accessibile in questo modo:

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

Tuttavia, probabilmente vorrai essere in grado di accedere a fres Dati h pure, così si sarebbe probabilmente provare qualcosa di simile:

// 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() { 
      ... 
     }); 
    } 
}); 

Intendiamoci, se non si ha la comprensione di come impostare un endpoint utilizzando Apache e PHP, si vuole attaccare con solo il bootstrap dei dati sulla finestra o una variabile globale. Non è l'ideale, ma funzionerebbe.

Answer 2

Dal momento che si sta già ricevendo i dati JSON, appena uscita i dati JSON. Non c'è bisogno di fare json_decode.

Quindi, solo echo $returned_content

Edit:

La parte in cui si dispone di $http.get(' WHAT SHOULD GO HERE? ') nel codice angolare dovrebbe puntare al relativo URL della pagina PHP. per esempio. Se la pagina PHP si accede al http://server.com/webapp/get_data.php allora il vostro angolare sarebbe $http.get('/webapp/get_data.php')

Answer 3

Si potrebbe semplicemente forzare su al campo di applicazione in questo modo, non so se è meglio pratica, ma ya ... Oppure si potrebbe avere il controller angolare chiamata a una funzione php in un

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

o semplicemente spingere sulla portata

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

Answer 4

Grazie a tutti per il vostro aiuto. Sta funzionando e la soluzione è stata molto semplice.

Ho creato una variabile in Javascript che ottiene il contenuto restituito da PHP.

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

poi ho messo questa variabile nel mio angolare file app:

//MYAPP 

var app = angular.module("MyApp", []); 

app.controller("PostsCtrl", function($scope) { 
    $scope.posts = thedata; 
    console.log(thedata); 
}); 

posso accedere a questi dati ora nella mia ng-repeat.

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

Funziona benissimo! Soluzione molto semplice