Ruby on rails 使用带有angularjs的rails json api_Ruby On Rails_Json_Angularjs

Ruby on rails 使用带有angularjs的rails json api

ruby-on-rails json angularjs

Ruby on rails 使用带有angularjs的rails json api,ruby-on-rails,json,angularjs,Ruby On Rails,Json,Angularjs,我是angularjs/clientjs新手，希望使用angularjs使用rails json api。经过一些研究，我写了ff:code，但是当我访问http://localhost:3000/users我得到的是纯json。未调用Angularjs来渲染视图如何呈现一个angularjs视图来格式化和显示rails json api返回的数据铁路/路线 rails/users\u controller.rb rails/main_controller.rb rails/应用程序布局 a

我是angularjs/clientjs新手，希望使用angularjs使用rails json api。经过一些研究，我写了ff:code，但是当我访问

http://localhost:3000/users

我得到的是纯json。未调用Angularjs来渲染视图

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

铁路/路线 rails/users\u controller.rb rails/main_controller.rb rails/应用程序布局 app/assets/javascripts/services/UserService.js app/assets/javascripts/controllers/userscocontroller.js

我想我知道你们在尝试什么，因为我正在研究类似的问题

一旦Rails发送json，就是这样。你不能要求它呈现其他 html/erb，并使用它来解释json数据
请参阅上的答案

为了同时实现两个Rails+角度路由（使用URL呈现Rails页面，使用ajax/api调用呈现json数据），我设置了一个@view模型，其中包含请求+json数据的角度页面URL

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

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

对于ajax/api调用：设置使用angular.config进行路由，就像在render页面中一样，并添加resolve:fetchData（controller#action）以从Rails控制器获取json数据，并在angular页面中使用它

Rails控制器：

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中的内容。请记住在json/api调用中使用ng href或ng click链接

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

您的问题是什么？我无意中将其编辑掉了。我仍然认为这是显而易见的。未调用Angularjs模板。rails模板也不是。只是json。您正在为/users指定routes.rb中的默认格式为json。如果你不想这样，为什么会这样？如果希望默认格式为HTML，只需将其删除即可。否则，您应该能够将.html添加到URL的末尾。我不确定是否理解您的意思。我希望rails应用程序向angularjs客户端发送json。然后angularjs客户机将使用json数据呈现角度html模板。这就是角度的工作原理吗？我是新来的。我认为我根本不应该使用rails模板，但是一些教程已经使用了rails模板和角度模板。我应该删除rails视图目录吗？我也有类似的问题。上述问题解决了吗？有人能帮忙吗？我实际上想做的是标准的angularjs用例。我需要路由所有传入的服务器请求以绕过rails路由器并转到angularjs路由。我使用

根目录：application#home'get“*path”=>“application#home”

。然后在该控制器中，我放入了

render:layout=>'application'，：nothing=>true

，因为没有呈现服务器端视图。如果您要求Rails不呈现任何内容，那么如何将用户数据获取到视图中？假设它是一个单页站点/或api服务，您可以使用js/json调用呈现json（Rails控制器仍然需要呈现：json@user，否则不会返回任何内容）。然后，在第一次json调用之前，索引页/客户端应用程序需要预加载angular脚本。这意味着索引页不能是json。您可以查看一下这篇文章，尝试使用Rails为“/”呈现html+angular脚本，并使用angular.config处理其余的路由。

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

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: '/'
        });
});

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'} }
});
}]);

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

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

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