Question

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

我想知道这个程序最好的AngularJS结构是什么？我在考虑以下内容：我创建一个控制器，并将一些结果字典列表添加到控制器的$ scope中，该控制器存储sql查询的JSON输出。我还将输入表单绑定到某个变量$ scope.input。然后，我向查询添加一个函数$ scope.performQuery（），它根据$ scope.input对PHP文件进行自定义的AJAX调用，这当然意味着我应该让我的控制器依赖于$ http。

这会是最好的结构方法吗？我是AngularJS的新手，所以我不确定是否有更优雅的方式。

Answer 1

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

例如

服务

PHP - 返回JSON对象数组

客户端

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

Answer 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>

AngularJS简单Ajax程序组织？

2 个答案: