AngularJS 组织简单的 Ajax 程序？答案

【问题标题】：AngularJS Organization of Simple Ajax Program?AngularJS 组织简单的 Ajax 程序？
【发布时间】：2015-06-23 13:52:17
【问题描述】：

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

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

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

【问题讨论】：

尽可能写最简单的工作代码，然后进行重构，你可以按照这个风格指南github.com/johnpapa/angular-styleguide

标签： javascript php jquery ajax angularjs

【解决方案1】：

将 PHP 视为一项服务，并根据其关注点拆分 Angular 客户端。

例如

服务

PHP - 返回 JSON 对象数组

客户

Angular 控制器将调用 PHP 并将结果绑定到 $scope 变量
将 $scope 变量绑定到 HTML 表的 HTML 页面模板。（有很多关于如何做到这一点的例子，但这里有一个答案Bind json to HTML table with AngularJS on page load）

【讨论】：

【解决方案2】：

为了简单起见……对我来说，你有数据/后端层、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，您需要创建一个可以进行查询的端点，为了节省自己的打字时间，我将向您推荐我给类似 here. 的人提供的答案

一旦您将数据成功发回给您...您只需要运行 NG-REPEAT 即可显示数据：

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

【讨论】：