Question

首先让我这样说：这是我第一次参加angularJS。

我正在构建一个角度应用程序，其中包含可以直接针对数据库编写sql的功能。除了安全问题（我是唯一一个在完成后使用此应用程序的人）。

我在后端构建了一个服务，该服务将返回一个json对象的结果，该结果是作为params [：query] [＆＃39; input＆＃39;]传递的任何查询（后端是一个rails应用程序）。

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

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

但是，这不是异步的，页面会尝试重定向，而数据也不会按原样进入。

Answer 1

看看AngularJS tutorial - REST and custom services，您将在那里找到Angular提供的用于进行Ajax调用的服务。如果你还没有，我建议你阅读整个教程。

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

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

你会看到你所取得的一切。

如何在角度应用程序中提交新查询？

3 个答案: