Передача переменной php на угловой

Question

Я создаю webapp, и я использую угловой в первый раз. Вчера я попробовал получить данные из API, но он не будет работать в Угловой причине ограничений ресурсов кросс-контентов. Lucky Я могу получить дату json через простой запрос CURL в PHP.

Итак, теперь я сейчас. У меня есть данные JSON в переменной PHP и вы хотите использовать эти данные в своем Угловом приложении. Как я могу это достичь? Есть ли способ передать данные непосредственно угловым? Или я должен создать json-файл с php, а затем загрузить его в свою функцию? Какие у вас есть предложения?

Я хочу заполнить $ scope.posts содержимым переменной php переменной $ content.

Вот код 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); 



     ?> 

Угловой код:

//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

Вы могли бы обеспечить и конечную точку, используя Apache и PHP, чтобы получить эти данные с вашего собственного сервера:

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

Вы также можете сделать что-то, иногда называемое «загрузкой» данных в DOM. Это работает отлично - я обычно делаю это, чтобы обеспечить загрузку первой страницы приложения с одной страницей, не требуя ожидания на исходные данные.Все для загрузки первой страницы настраивается на сервере и отображается на странице для приложения для сбора без дальнейших запросов:

Для этого вы можете создать коллекцию в окне или глобальной области следующим образом:

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

Тогда позже в вашем приложении, вы, как правило, можно ожидать, что объект окна (или глобальная переменная) будет доступна в браузере во все времена, так что это будет доступно, как это:

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

Однако вы, вероятно, хотите иметь доступ к fres ч данных, а также, так что вы, вероятно, попробовать что-то вроде этого:

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

заметь, если вы не имеете представление о том, как настроить конечную точку с помощью Apache и PHP, вы хотите придерживаться только загружая данные в окно или глобальную переменную. Это не идеально, но это сработает.

Answer 2

Поскольку вы уже получаете данные в формате JSON, только выходные данные в формате JSON. Не нужно делать json_decode.

Так что echo $returned_content

Edit:

части, где у вас есть $http.get(' WHAT SHOULD GO HERE? ') в вашем угловом коде должны указывать относительный URL страницы PHP. например Если страница PHP доступна на http://server.com/webapp/get_data.php тогда ваш Угловом будет $http.get('/webapp/get_data.php')

Answer 3

Вы могли бы просто заставить его на сферу, как это, не уверен, что это лучшая практика, но я ... Или вы могли бы иметь свой угловой контроллер вызов функции PHP в

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

или просто засунуть его по размаху

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

Answer 4

Спасибо всем за помощь. Он работает, и решение было очень простым.

Я создал переменную в Javascript, которая получает возвращаемое содержимое PHP.

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

Тогда я поставил эту переменную в моем угловом приложение файла:

//MYAPP 

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

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

я могу получить доступ к этой информации в настоящее время в моем нг-повтора.

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

It works sweet! Очень простое решение.