Rails 中的 ng 资源。 AngularJS + Rails 教程答案

【问题标题】：ng-resource in Rails. AngularJS + Rails tutorialRails 中的 ng 资源。 AngularJS + Rails 教程
【发布时间】：2014-08-16 23:14:48
【问题描述】：

我正在尝试使用 ng-resource 来显示书名索引。这是 AngulaRails 的第 11 章，到目前为止真的很难。

我知道我的问题与尝试在我的咖啡脚本控制器中使用资源有关，因为当我只使用带有特定 url 的 $http "get" 请求时，一切正常。以下是我的代码的所有部分：

1.javscripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require angular.min
//= require angular-resource

//= require angular-application

2 序列化器：

class BookSerializer < ActiveModel::Serializer
  attributes :id, :title, :author

end

3 这很好用：

AngulaRails.config ["$httpProvider", ($httpProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
  $httpProvider.defaults.headers.common.Accept = "application/json"
]

4 javascripts/angular-application.js

//= require_self
//= require_tree ./angular

AngulaRails = angular.module("AngulaRails", ["ngResource"]);

5 我要查看的索引的索引控制器：

  # GET /books
  def index
    @books = Book.all

    respond_to do |format|
      format.html {   }
      format.json { render json: @books, root: false, each_serializer: BookSerializer }
    end
  end

6 我尝试使用的资源的工厂。在这种情况下，我正在调用索引查询：

AngulaRails.factory "Book", ($resource) ->
  $resource("/books/:id")
  {
  'get':    {method: 'GET'},
  'save':   {method: 'POST'},
  'query':  {method: 'GET', isArray: true},
  'remove': {method: 'DELETE'},
  'delete': {method: 'DELETE'}
  }

最后但并非最不重要的是，此应用的咖啡脚本控制器：

AngulaRails.controller "BooksController", ($scope,  Book) ->
  $scope.getBooks = () ->
    $scope.books = Book.query()

当我尝试运行它时，console.log 会给我一个错误提示：

错误：Book.query 不是函数

【问题讨论】：

标签： ruby-on-rails angularjs coffeescript ngresource

【解决方案1】：

你的工厂声明确实有问题。您不需要将操作分配给“GET”、“POST”等请求类型，因为这是默认设置。

可能出现的唯一问题是默认情况下向POST 请求显示的更新操作。但是，出于更新数据记录的目的，PUT 请求可能更合理。因此，我包含了{update: {method: "PUT"}}，它覆盖了默认值。

信用：AngulaRails 书。这有效：

  AngulaRails.factory "Book", ($resource) ->
    $resource("/books/:id", {id: "@id"}, {update: {method: "PUT"}})

但是，如果您想明确地包含它，请注意正确设置括号。

AngulaRails.factory "Book", ($resource) ->
  $resource("/books/:id", {id: "@id"},
  {
   get:    {method: 'GET'},
   save:   {method: 'POST'},
   query:  {method: 'GET', isArray: true},
   remove: {method: 'DELETE'},
   delete: {method: 'DELETE'}
   update: {method: "PUT"}
  })

【讨论】：

感谢您的回答！！主要问题是我有另一家工厂在运营，而且在我的资产管道中是在这家之后，所以 Rails 使用 IT 并覆盖了这家。 ****摇头****

【解决方案2】：

工厂声明有问题。它正在返回这个对象：

  {
  'get':    {method: 'GET'},
  'save':   {method: 'POST'},
  'query':  {method: 'GET', isArray: true},
  'remove': {method: 'DELETE'},
  'delete': {method: 'DELETE'}
  }

...其query 属性是对象，而不是函数...因此出现错误。这大概就是你的意思……

($resource) ->
  $resource("/books/:id", {}, 
  {
  'get':    {method: 'GET'},
  'save':   {method: 'POST'},
  'query':  {method: 'GET', isArray: true},
  'remove': {method: 'DELETE'},
  'delete': {method: 'DELETE'}
  })

【讨论】：

试过了，但仍然得到同样的“Book.query is not a function”错误

【解决方案3】：

主要问题是我有另一家工厂在运营，而且在我的资产管道中的这家工厂之后，所以 Rails 使用 IT 并覆盖了这家工厂。摇头

但是是的，这个哈希不是必需的：

{
  'get':    {method: 'GET'},
  'save':   {method: 'POST'},
  'query':  {method: 'GET', isArray: true},
  'remove': {method: 'DELETE'},
  'delete': {method: 'DELETE'}
  }

【讨论】：