【问题标题】：Consuming a rails json api with angularjs使用 angularjs 使用 rails json api
【发布时间】：2014-04-10 17:43:43
【问题描述】：

我是 angularjs/clientjs 的新手，想使用带有 angularjs 的 rails json api。经过一些研究，我编写了 ff: 代码，但是当我访问 http://localhost:3000/users 时，我得到了普通的 json。没有调用 Angularjs 来渲染视图。

如何渲染一个 angularjs 视图来格式化和显示 rails json api 返回的数据？

铁路/路线

app::Application.routes.draw do
  get 'main/index' => 'main#index'
  resources :users, defaults: {format: :json}
end

rails/users_controller.rb

def index
 @users = User.all
end

rails/main_controller.rb

def index
 # blank
end

rails/应用程序布局

..
<html ng-app='gold'>
..
<div ng-view>
  <%= yield %>
</div>
..

app/assets/templates/main/index.html

app/assets/templates/users/index.html

app/assets/javascripts/main.js

var myApp = angular.module('gold', ['ngRoute', 'ngResource']);

myApp.config(function($routeProvider, $locationProvider, $httpProvider) {
    console.log("in router")
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = 
    $('meta[name=csrf-token]').attr('content');
    $locationProvider.html5Mode(true);
    $routeProvider.
        when('/users', {
            templateUrl: '../assets/users/index.html',          
            controller: 'UsersController'
        }).when('/main/index', {
            templateUrl: '../assets/main/index.html',
            controller: 'MainController'
        }).otherwise({
            redirectTo: '/'
        });
});

app/assets/javascripts/services/UserService.js

myApp.factory('UserService', ['$resource', function($resource) {
console.log("in user service")
return $resource('/users/:id', {id: '@id'}, {
    index: { method: 'GET', isArray: true },
    create: { method: 'POST' },
    show: { method: 'GET' },
    update: { method: 'PUT', params: {id: '@id'} }
    //delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);

app/assets/javascripts/controllers/UsersController.js

myApp.controller('UsersController', ['$scope', 'UserService', function($scope, UserService) {
 console.log("in user controller")
   $scope.users = UserService.query();
}]);

【问题讨论】：

你有什么问题？
我不小心把它编辑掉了。我仍然认为这很明显。没有调用 Angularjs 模板。 rails 模板也不是。只是 json。
您在您的 routes.rb 中为 /users 指定默认格式为 json。如果您不希望出现这种情况，为什么会出现这种情况？如果您希望默认格式为 HTML，只需将其删除。否则，您应该能够将 .html 添加到 URL 的末尾。
我不确定我是否理解你。我希望 rails 应用程序将 json 发送到 angularjs 客户端。然后，angularjs 客户端将使用 json 数据来呈现 angular html 模板。这是角度的工作原理吗？我是新手。我以为我根本不应该使用 rails 模板，但是一些教程一直在使用 rails 模板和 angular 模板。我应该删除 rails 视图目录吗？
我也有类似的问题。上面的问题解决了吗？有人可以帮忙吗？

标签： ruby-on-rails json angularjs

【解决方案1】：

我想我知道你在尝试什么，因为我正在解决类似的问题。

一旦 Rails 发送 json，就是这样。你不能要求它渲染其他 html/erb 并使用它来解释 json 数据。
看到这个答案 How can we use rails routes with angularjs in a DRY way?
为了同时实现 Rails + Angular 路由（使用 URL 渲染 Rails 页面，使用 ajax/api 调用呈现 json 数据），我设置了一个 @view 模型，其中包含请求的 Angular 页面 url + json 数据.

对于普通的 HTML 请求：default.html.erb 使用“jsonService.js.erb”将@view 变量转换为.js，并在@view 中呈现角度页面。

对于 ajax/api 调用：使用 angular.config 设置路由，就像为渲染页面所做的那样，并添加 resolve: fetchData(controller#action) 以从 Rails 控制器获取 json 数据并在 angular 页面中使用它。

导轨控制器：

respond_to do |format|
  format.json { @view }
  format.html { render 'layouts/default' }
end

default.html.erb

<script id="jsonService"><%= render "layouts/json_service.js" %></script>
<div ng-include ="content.view.template"></div>

角

您可以将获得的内容用于 angular.config。请记住使用 ng-href 或 ng-click 获取 json/api 调用中的链接。

如果你在angular.config中有动态路由，记得在替换html内容后调用$scope.$digest。

【讨论】：

我真正想做的是标准的 angularjs 用例。我需要路由所有传入的服务器请求以绕过 rails 路由器并转到 angularjs 路由。我用root to: application#home' get "*path" => "application#home"。然后在那个控制器中我输入了render :layout => 'application', :nothing => true，因为没有呈现服务器端视图。
如果您要求 Rails 什么都不渲染，那么如何将用户数据放入您的视图中？假设它是单页站点/或 api 服务，您可以使用 js/json 调用渲染 json（Rails 控制器仍然需要渲染 :json @user，否则不会返回任何内容）。然后索引页面/客户端应用程序将需要在第一次 json 调用之前预加载角度脚本。这意味着索引页面不能是 json。你可以看看这个railscasts.com/episodes/405-angularjs>
尝试使用 Rails 为“/”渲染 html + angular 脚本，并使用 angular.config 处理其余的路由。