Angular.js如何从PHP读取后台数据

 更新时间:2016年03月24日 11:51:11   作者:fareise  
这篇文章主要为大家简单介绍了Angular.js如何从PHP读取后台数据,本文将Angular和PHP相结合,从后台读取数据,感兴趣的小伙伴们可以参考一下

之前已经有很多方法可以通过angular进行本地数据的读取。以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合,从后台读取数据
首先,利用PHP,我们定义了一组后台数据,代码如下(test.php):

<?php 
header("Access-Control-Allow-Origin: *"); 
header("Content-Type: application/json; charset=UTF-8"); 
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); 
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers"); 
$outp = ""; 
while($rs = $result->fetch_array(MYSQLI_ASSOC)) { 
  if ($outp != "") {$outp .= ",";} 
  $outp .= '{"Name":"' . $rs["CompanyName"] . '",'; 
  $outp .= '"City":"'  . $rs["City"]    . '",'; 
  $outp .= '"Country":"'. $rs["Country"]   . '"}';  
} 
$outp ='{"records":['.$outp.']}'; 
$conn->close(); 
echo($outp); 
?> 

 这段代码含义比较简单,连接数据库后,从数据库中利用sql语句选择相应的数据($conn->query("SELECT CompanyName, City,Country FROM Customers"))。之后,利用循环结构,将取出的数据以键值对的形式保存在$outp变量中。
接下来,在js中操作如下:

<div ng-app="myApp" ng-controller="customersCtrl">  
<table> 
 <tr ng-repeat="x in names"> 
  <td>{{ x.Name }}</td> 
  <td>{{ x.Country }}</td> 
 </tr> 
</table> 
</div> 
<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
  $http.get("test.php") 
  .success(function (response) {$scope.names = response.records;}); 
}); 
</script> 

 这里仍然应用了$http服务进行数据的读取,传入数据文件对应的url路径,成功后返回数据,并绑定到$scope.names变量上。

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • AngularJS之页面跳转Route实例代码

    AngularJS之页面跳转Route实例代码

    本篇文章主要介绍了AngularJS之页面跳转Route ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular6封装http请求的步骤详解

    Angular6封装http请求的步骤详解

    最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块
    2018-08-08
  • 详解AngularJS中自定义指令的使用

    详解AngularJS中自定义指令的使用

    这篇文章主要介绍了详解AngularJS中自定义指令的使用,包括结合自定义HTML标签的使用,需要的朋友可以参考下
    2015-06-06
  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    这篇文章主要给大家介绍了关于如何使用RxJS更优雅地进行定时请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用RxJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • AngularJS中的$parse服务与$eval服务用法实例

    AngularJS中的$parse服务与$eval服务用法实例

    这篇文章主要介绍了AngularJS中的$parse服务与$eval服务用法,结合实例形式分析了AngularJS中$parse服务与$eval服务的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2023-05-05
  • AngularJs Understanding the Model Component

    AngularJs Understanding the Model Component

    本文主要介绍AngularJs Understanding the Model Component的内容,这里整理了相关资料,并详细讲解了这部分知识,有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS使用ocLazyLoad实现js延迟加载

    AngularJS使用ocLazyLoad实现js延迟加载

    这篇文章主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下
    2017-07-07
  • 详解封装基础的angular4的request请求方法

    详解封装基础的angular4的request请求方法

    这篇文章主要介绍了详解封装基础的angular4的request请求方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • AngularJS directive返回对象属性详解

    AngularJS directive返回对象属性详解

    这篇文章主要为大家纤细介绍了AngularJS directive返回对象属性的相关内容,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    AngularJS使用angular.bootstrap完成模块手动加载的方法分析

    这篇文章主要介绍了AngularJS使用angular.bootstrap完成模块手动加载的方法,结合实例形式分析了angular.bootstrap函数手动加载模块的步骤与相关操作技巧,需要的朋友可以参考下
    2017-01-01

最新评论