ruby-on-rails - 如何将 Angular 表单保存到我的 ruby​​ on rails 后端？

Question

我是 Angular 的新手。我已经尝试了所有我知道的方法，而且 Google 搜索中关于这个特定问题的教程出奇地少。这是我尝试的最后一个代码:

索引.html

<form ng-submit="addArticle(articles)">
<input type="text" id="title" ng-model="newPost.title">
<input type="text" id="body" ng-model="newPost.body">
<input type="submit" value="Submit">
</form>

文章 Controller

app.controller('ArticlesCtrl', function($scope, Article) {
  $scope.articles   = Article.query();
  $scope.newPost     = Article.save();
});

文章服务(rails 后端)

app.factory('Article', function($resource) {
  return $resource('http://localhost:3000/articles');
});

我可以很好地检索数据。但是我无法向 Rails 后端提交任何新数据。在页面加载时，rails 服务器错误是:

Started POST "/articles" for 127.0.0.1 at 2015-02-08 18:26:29 -0800
Processing by ArticlesController#create as HTML
Completed 400 Bad Request in 0ms

ActionController::ParameterMissing (param is missing or the value is empty: article):
  app/controllers/articles_controller.rb:57:in `article_params'
  app/controllers/articles_controller.rb:21:in `create'

按下提交按钮什么都不做。该表单基本上不起作用，并且该页面在加载后立即查找提交。

我明白错误说的是什么，它没有从表单接收参数。我不明白的是在我的 Controller 和/或表单中应该是什么样子。

我做错了什么，我该如何解决？

Answer 1

Angular 有一个功能叫做 services它充当应用程序的模型。这是我与 Rails 后端通信的地方:

服务/article.js

app.factory('Article', function($resource) {
  return $resource('http://localhost:3000/articles/:id', { id: '@id'},
  {
   'update': { method: 'PUT'}
  });
});

即使 :id最后指定，它也适用于直接进入 /articles小路。 id只会在提供的地方使用。

其余的工作进入 Controller :

Controller /articles.js

app.controller('NewPostCtrl', function($scope, Article) {
  $scope.newPost  = new Article();

  $scope.save = function() {
    Article.save({ article: $scope.article }, function() {
      // Optional function. Clear html form, redirect or whatever.
    });
  };

});

最初，我假设 save()通过 $resources 提供的功能有点自动。是的，但我用错了。默认 save()函数最多可以接受四个参数，但似乎只需要将数据传递给数据库。在这里，它知道发送 POST向我的后端请求。

View /文章/index.html

<form name="form" ng-submit="save()">
    <input type="text" id="title" ng-model="article.title">
    <input type="text" id="body" ng-model="article.body">
    <input type="submit" value="Submit">
</form>

拿到后 service设置正确，其余的很容易。在 Controller 中，需要创建资源的新实例(在本例中为新文章)。我新建了一个 $scope包含调用 save 的函数的变量我在 service 中创建的方法.

请记住，在服务中创建的方法可以随意命名。它们的重要性在于发送的 HTTP 请求的类型。对于任何 RESTful 应用程序来说尤其如此，如 GET 的路由请求与 POST 相同要求。

下面是我找到的第一个解决方案。再次感谢您的答复。他们在我的实验中帮助我了解这是如何工作的!

原解决方案:
我终于修复了它，所以我会发布我的特定解决方案。但是，我只是在缺乏信息的情况下才走这条路线的，如何通过一个 Angular service 执行此操作.理想情况下，服务会处理这种 http 请求。另请注意，使用 $resource 时在服务方面，它带有一些功能，其中之一是 save() .然而，这对我来说也不起作用。

关于$http的信息:https://docs.angularjs.org/api/ng/service/$http

关于$resource的信息:https://docs.angularjs.org/api/ngResource/service/$resource

服务和工厂教程(非常有用):http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

文章.js Controller

app.controller('FormCtrl', function($scope, $http) {
$scope.addPost = function() {
$scope.article = {
  'article': {
    'title'  : $scope.article.title,
    'body'   : $scope.article.body
  }
};

// Why can't I use Article.save() method from $resource?
    $http({
        method: 'POST',
        url: 'http://localhost:3000/articles',
    data: $scope.article
    });
};

});

由于 Rails 是后端，发送 POST请求到 /articles路径调用 #create方法。对我来说，这是一个比我之前尝试的更简单的解决方案。

了解使用 services : $resource让您可以访问 save()功能。但是，我仍然没有揭开在这种情况下如何使用它的神秘面纱。我去了 $http因为它的功能很明确。

Sean Hill 有一个推荐，这是我今天第二次看到。它可能对与此问题搏斗的其他人有所帮助。如果我遇到使用服务的解决方案，我会更新它。

谢谢大家的帮助。