angular + rails 5（flapper news） - 无限循环错误

Question

最近我试过通过rails + angular tutorial的ruby。

的地方，我就死在：https://thinkster.io/tutorials/angular-rails/wiring-everything-up

至今：https://github.com/grfx1985/angular-rails-example

本教程的目的是去与轨道-4。我已经开始在rails-5上构建它。

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

我被困在一个奇怪的问题上。尝试用轨道后端连接应用程序的现有状态。获取所有记录的方法 - 将前端和后端合并的最初步骤之一（最后一次提交）是循环尝试从“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

事实证明经由

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