AngularJS组织简单Ajax程序


AngularJS Organization of Simple Ajax Program?

这个程序有三个主要部分。一个是输入表单,一个是php文件,最后一个是表。当用户在输入表单中输入查询时,php文件应该根据输入表单中的内容执行自定义查询,然后以JSON格式返回结果。然后应根据结果编制一份表格而且,如果用户在输入表单中输入了一个新的查询,那么旧表应该被一个新表取代

我想知道这样一个程序最好的AngularJS结构是什么?我想的是:我制作了一个控制器,并将一些结果字典列表添加到控制器的$scope中,它存储sql查询的JSON输出。我还将输入表单绑定到一些变量$scope.input。然后,我在查询中添加了一个函数$scope.performQuery(),它对基于$scope.input的PHP文件进行了自定义AJAX调用,这当然意味着我应该使我的控制器依赖于$http。

这会是解决这一问题的最佳结构方法吗?我是AngularJS的新手,所以我不确定是否有更优雅的方式。

将PHP视为一项服务,并根据其关注点对angular客户端进行拆分。

例如

服务

  • PHP-返回JSON对象数组

客户端

  • 将调用PHP并将结果绑定到$scope变量的角度控制器
  • 将$scope变量绑定到HTML表的HTML页面模板。(有很多关于如何做到这一点的例子,但这里的答案显示了它在页面加载时使用AngularJS将json绑定到HTML表)

为了保持简单。。。对我来说,您有数据/后端层、ajax层和表层。

首先,您需要将您的输入连接到范围。。。这很简单。关于如何启动函数(将启动ajax调用),您有三个操作

首先你可以有一个按钮

<input ng-model="queryData" type="text"> <button ng-click="sendCall()"></button>

其次,每次用户更改输入的内容时,都可以让它发出ajax调用

<input ng-model="queryData" type="text" ng-change="sendCall()">

第三(但可能是最不流行的),每次用户在输入之外点击时,都可以触发调用。

<input ng-model="queryData" type="text" ng-blur="sendCall()">

现在你需要从你的控制器内启动AJAX调用:

$scope.sendCall() = function(){
    var data = {
         query: queryData
  }
 $http.post('linkToEndpoint.php',data).success(function(result){
   //If your ajax call worked you will store the contents into your results
   //variable
   $scope.results = result;
 }).error(function(error){
     //If it fails... console the error to see what went wrong
     console.error(error);
 })
}

对于后端的PHP,您需要创建一个端点来进行查询,以节省自己的一些输入,我将向您介绍我在这里给类似人员的答案。

一旦您成功地将数据发送回您。。。您只需要运行NG-REEAT即可显示数据:

 <table>
 <tr ng-repeat="result in results"> 
  <td>{{result.data}}</td>
 </tr>
 </table>