Angular.js如何从PHP读取后台数据  更新时间:2016年03月24日 11:51:11   作者:fareise   这篇文章主要为大家简单介绍了Angular.js如何从PHP读取后台数据,本文将Angular和PHP相结合,从后台读取数据,感兴趣的小伙伴们可以参考一下 之前已经有很多方法可以通过angular进行本地数据的读取。以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合,从后台读取数据。 首先,利用PHP,我们定义了一组后台数据,代码如下(test.php):  这段代码含义比较简单,连接数据库后,从数据库中利用sql语句选择相应的数据($conn->query(“SELECT CompanyName, City,Country FROM Customers”))。之后,利用循环结构,将取出的数据以键值对的形式保存在$outp变量中。 接下来,在js中操作如下: {{ x.Name }} {{ x.Country }}  这里仍然应用了$http服务进行数据的读取,传入数据文件对应的url路径,成功后返回数据,并绑定到$scope.names变量上。 以上就是本文的全部内容,希望对大家的学习有所帮助。 您可能感兴趣的文章: AngularJS实现分页显示数据库信息 Angular.JS内置服务$http对数据库的增删改使用教程 三种AngularJS中获取数据源的方式 AngularJS实现数据列表的增加、删除和上移下移等功能实例 基于AngularJS实现页面滚动到底自动加载数据的功能 Angularjs实现多个页面共享数据的方式 详解angularJs中自定义directive的数据交互 Angularjs 滚动加载更多数据 深入学习AngularJS中数据的双向绑定机制 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解 Angular.JS读取数据库数据调用完整实例 Angular.js PHP 后台数据 相关文章 用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式) 这篇文章主要介绍了用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 AngularJS内置指令 这篇文章主要详细介绍了AngularJS内置指令的使用方法,非常详细,常用的一些指令操作都做了总结,有需要的小伙伴参考下 2015-02-02 详解angular ui-grid之过滤器设置 本篇文章主要介绍了详解angular ui-grid之过滤器设置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 AngularJS2 与 D3.js集成实现自定义可视化的方法 本篇文章主要介绍了ANGULAR2 与 D3.js集成实现自定义可视化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 详解Angular中的自定义服务Service、Provider以及Factory 本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-04-04 AngularJS实用基础知识_入门必备篇(推荐) 下面小编就为大家带来一篇AngularJS实用基础知识_入门必备篇(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 angularJS深拷贝详解 本篇文章主要介绍了angularJS深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 深入理解AngularJS中的ng-bind-html指令 ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html()。这篇文章主要给大家深入的介绍了AngularJS中ng-bind-html指令 的相关资料,需要的朋友可以参考下。 2017-03-03 详解Angular2中的编程对象Observable 大家都是在Reactive Extensions for Javascript诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象,有需要的朋友们可以参考借鉴。 2016-09-09 AngularJS中实现用户访问的身份认证和表单验证功能 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下 2016-04-04 最新评论

之前已经有很多方法可以通过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实现分页显示数据库信息
  • Angular.JS内置服务$http对数据库的增删改使用教程
  • 三种AngularJS中获取数据源的方式
  • AngularJS实现数据列表的增加、删除和上移下移等功能实例
  • 基于AngularJS实现页面滚动到底自动加载数据的功能
  • Angularjs实现多个页面共享数据的方式
  • 详解angularJs中自定义directive的数据交互
  • Angularjs 滚动加载更多数据
  • 深入学习AngularJS中数据的双向绑定机制
  • 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
  • Angular.JS读取数据库数据调用完整实例
张贴在3