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