angular + rails 5(扑翼新闻)-无限循环错误

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