angular + rails 5 (flapper news) - 无限循环错误

Question

最近我尝试过一个 ruby​​ on rails + angular 教程。

我卡住的地方：https://thinkster.io/tutorials/angular-rails/wiring-everything-up

到目前为止：https://github.com/grfx1985/angular-rails-example

本教程旨在与 rails-4 一起使用。我已经开始在 rails-5 上构建它。

到目前为止，我没有任何问题。

我遇到了一个奇怪的问题。尝试将应用程序的现有状态与 rails 后端连接起来。获取所有记录的方法 - 将前后组合（最后一次提交）的第一步是循环自身尝试从“posts.json”接收数据。最终它使浏览器崩溃（firefox、chrome - 最新版本）。

localhost:3000/posts.json 渲染 json。

我查看了代码，将它与其他人的存储库进行了比较，看看是否混淆了某些东西，但仍然无法找到问题所在。在这一点上，我不确定这种行为的原因是什么。

APP.js：

angular.module('flapperNews', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home/_home.html',
      controller: 'MainCtrl',

      commented below app works: 
      -------------
      resolve: {
        postPromise: ['posts', function(posts){
          return posts.getAll();
        }]
        }
      -------------
    })
    .state('posts', {
      url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
      controller: 'PostsCtrl'
    })
  $urlRouterProvider.otherwise('home');
}])

posts.js 文件：

angular.module('flapperNews')
.factory('posts', ['$http', function($http){
  var o = {
    posts: []
  };
  ---- this is not working ----
  o.getAll = function() {
        return $http.get('/posts.json').success(function(data){
        angular.copy(data, o.posts);
    });
  };
  -----------------------------

  o.create = function(post) {
    return $http.post('/posts.json', post).success(function(data){
      o.posts.push(data);
    });
  };

  return o;
}]) 

Answer 1

事实证明，通过

提供的 angular 版本

//= require angular（此时为 1.6.2）

为您提供最新的可能

因此更改设置并删除该行，并且还包括初始脚本标记：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

在application.html.erb 文件中修复了这个问题

Answer 2

发现这篇文章是因为我也遇到了同样的问题，并设法找到了一个允许您继续使用 1.6.x 的解决方案。根据this page，success() 和 error() 方法已被弃用，取而代之的是 then() 和 catch()。因此，我将代码中的 success() 调用更改为 then()，它对我来说可以正常工作。

posts.js：

angular.module('flapperNews')
    .factory('posts', [
        '$http',
        function($http) {
            var o = {
                posts: []
            };
            o.getAll = function() {
                return $http.get('/posts.json').then(function(data) {
                    angular.copy(data, o.posts)
                })
            };
            return o;
        }
    ]);