如何在 Angular 应用程序中提交新查询？答案

【问题标题】：How can I submit a new query in an angular application?如何在 Angular 应用程序中提交新查询？
【发布时间】：2014-07-25 16:29:42
【问题描述】：

首先让我这样说：这是我第一次尝试 angularJS。

我正在构建一个 Angular 应用程序，它具有可以直接针对数据库编写 sql 的功能。撇开安全问题不谈（我是唯一在完成后使用此应用程序的人）。

我在后端构建了一个服务，它将返回作为 params[:query]['input'] 传入的任何查询的 json 对象结果（后端是一个 rails 应用程序）。

从前端，我想传入一个名为 input 的查询参数。所以在 Angular 应用程序的表单中，我创建了这个表单：

<form action="/path/to/service" method="post">
  <textarea id="input" name="input"></textarea>
  <button id="execute" name="execute">Execute Query</button>
</form>

但是，这不是异步的，页面尝试重定向并且数据没有按应有的方式进入。

【问题讨论】：

你需要使用 $http 进行异步请求...

标签： javascript ruby-on-rails forms angularjs

【解决方案1】：

看看AngularJS tutorial - REST and custom services，在那里你会发现你需要使用Angular提供的哪些服务来进行Ajax调用。如果您还没有，我建议您阅读整个教程。

【讨论】：

【解决方案2】：

AngularJS 用于设计单页应用程序。

因此，一旦您的应用程序被加载，页面将不会刷新，并且所有服务器通信都是使用 Angular 的功能 $http 异步完成的。

如果你想提交任何表单，你可以像这样使用$http

HTML：

<form ng-submit="sub()">
    ...
</form>

然后在你的控制器中：

function ctrl($scope) {
    $scope.sub = function() {
        $http.post(url,data,headers)
            .success(function(data,status,headers,config) {
                //do something with data (response)
            })
    }
}

【讨论】：

【解决方案3】：

您需要的是控制器和工厂。使用 ng-click 指令，您可以调用控制器中的函数，该控制器调用工厂中的函数。工厂返回一个由控制器处理以将结果放入作用域的承诺。像这样的：

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope, dataService) {
  $scope.getData = function(query){
    var url = prepareYourURL(query) //HERE YOU PREPARE YOUR URL
    dataService.getData(url).then(function(result){
      $scope.data = result.data;
    });
  };
});

app.factory('dataService', function($http){
  return {
    getData: function(url) {
      return $http.get(url);
    }
  };
});

从你的 Html 你这样称呼它：

  <textarea ng-model="query"></textarea>
  <button ng-click="getData(query)">Execute Query</button>

然后您可以在视图中随意呈现数据。从这样做开始

<p>{{data}}</p>

然后您将看到您获取的所有内容。

【讨论】：