如何将Angular表单保存到rails后端的ruby上？

Question

我是Angular的新手.我已经尝试了我所知道的一切,谷歌搜索在这个特定问题上的教程很少.这是我尝试的最后一个代码:

的index.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>

文章控制器

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'

按提交按钮什么都不做.表单基本上不起作用,页面一加载就会查找提交.

我理解错误说的是,它没有从表单中接收参数.我不明白的是我的控制器和/或表格应该是什么样子.

我做错了什么,如何解决这个问题？

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这里提供的才会被使用.

其余工作进入控制器:

控制器/ 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向我的后端发送请求.

意见/文章/ 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正确完成设置后,其余部分很容易.在控制器中,需要创建资源的新实例(在本例中为新文章).我创建了一个新$scope变量,它包含调用save我在其中创建的方法的函数service.

请记住,可以根据需要为服务中创建的方法命名.它们的重要性在于发送的HTTP请求的类型.对于任何RESTful应用程序尤其如此,因为GET请求的路由与请求的路由相同POST.

以下是我发现的第一个解决方案.再次感谢您的回复.他们在我的实验中有助于了解这是如何工作的!

原始解决方案: 我终于修复了它,所以我将发布我的特定解决方案.但是,由于缺乏信息如何通过角度执行此操作,我才走这条路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/

articles.js控制器

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因为它的功能很明显.

肖恩希尔有个推荐,这是我今天第二次见到.对于解决这个问题的其他人来说,这可能会有所帮助.如果我遇到使用服务的解决方案,我会更新它.

感谢大家的帮助.