将php变量传递给angular

时间:2014-11-13 20:34:40

标签: javascript php json angularjs curl

我正在构建一个webapp,我第一次使用角度。我昨天尝试从API获取数据,但它不适用于Angular原因的跨源资源限制。幸运的是,我可以通过PHP中的简单CURL请求获取json日期。

所以我现在在这里。我在PHP变量中有JSON数据,并希望在我的Angular应用程序中使用这些数据。我怎样才能做到这一点?有没有办法将数据直接传递给角度?或者我应该用PHP创建一个json文件,然后将其加载到我的函数中?你有什么建议?

我想用$变量$ content。

的内容填充$ scope.posts

这是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
    });
});

4 个答案:

答案 0 :(得分:9)

您可以使用apache和php提供和端点从您自己的服务器获取此数据:

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

你也可以做一些有时被称为“引导”的事情。数据进入DOM。这很好 - 我通常这样做是为了确保单页应用的第一页加载不需要等待初始数据。第一页加载的所有内容都在服务器上设置并呈现到页面中,供应用程序收集而无需进一步请求:

为此,您可以在窗口或全局范围内创建一个集合,如下所示:

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

然后在您的应用中,您通常可以期望窗口对象(或任何全局变量)始终在浏览器中可用,因此它可以像这样访问:

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

但是,您可能希望能够访问新数据,因此您可能尝试这样的事情:

// 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设置端点,那么您将只想将数据引导到窗口或全局变量上。它并不理想,但它会起作用。

答案 1 :(得分:4)

谢谢大家的帮助。它工作正常,解决方案非常简单。

我在Javascript中创建了一个变量,它获取了PHP的返回内容。

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

然后我把这个变量放在我的角度app文件中:

//MYAPP

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

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

我现在可以在ng-repeat中访问此数据。

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

它很棒!很简单的解决方案

答案 2 :(得分:0)

由于您已经获得了JSON数据,因此只需输出JSON数据。无需执行json_decode。

所以只是echo $returned_content

编辑:

Angular代码中$http.get(' WHAT SHOULD GO HERE? ')的部分应指向PHP页面的相对URL。例如如果在http://server.com/webapp/get_data.php访问您的PHP页面,那么您的角度将为$http.get('/webapp/get_data.php')

答案 3 :(得分:0)

你可以强迫它进入这样的范围,不确定它是否是最佳实践但是... 或者你可以让你的角度控制器调用

中的php函数
$http.get('func').then(function(data) {
//do stuff
});

或只是将其推到范围

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