Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm trying to learn angular with this tutorial https://thinkster.io/tutorials/mean-stack/wiring-everything-up and I've hit a snag where opening the application runs into an infinite loop of calling the /posts url. I've checked my routes with postman and they are working as intended so I'm not sure why this isn't resolving correctly. Below is the 'posts' service, 'mainCtrl' controller, and the config. Could someone take a look and tell me if they see my error or if I need provide more of the code to help. Thank you.

Service

app.factory('posts', ['$http', function($http){
var o = {
    posts:[]
}

o.getAll = function() {
    return $http.get('/posts').success(function(data){
      angular.copy(data, o.posts);
    });
  };

return o;

}])

Controller

app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
$scope.test = 'Hello world!';

$scope.posts = posts.posts;

$scope.addPost = function(){
    if(!$scope.title || $scope.title === '') { return; }
    $scope.posts.push({
      title: $scope.title,
      link: $scope.link,
      upvotes: 0,
      comments: [
        {author: 'Joe', body: 'Cool post!', upvotes: 0},
        {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
      ]
    });
    $scope.title='';
    $scope.link='';
}

$scope.incrementUpvotes = function(post) {
  post.upvotes += 1;
};

}]);

Config

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
    .state('home', {
        url:'/home',
        templateUrl:'/home.html',
        controller:'MainCtrl',
        resolve: {
        postPromise: ['posts', function(posts){
          return posts.getAll();
        }]
      }
    })
    .state('posts', {
        url:'/posts/{id}',
        templateUrl:'/posts.html',
        controller:'PostsCtrl'
    })

$urlRouterProvider.otherwise('home');
}])
share|improve this question
    
thanks for the input. I checked this but it didn't resolve the infinite loop problem I'm having – Rawle Juglal Jan 16 at 21:01
1  
Try 'return angular.copy(data, o.posts);' – rrd Jan 16 at 21:36
    
Sorry, that did not fix it either. This is the repository if you'd like to look deeper at it github.com/RawleJuglal/rawle_news_app – Rawle Juglal Jan 16 at 21:45

I'm going to close this question with a solution that partially has worked for me. I say partially because I'm no longer experience an infinite loop but if someone comes across this question doing the tutorial they will eventually run into a new problem where clicking submit does create a new post but the data is not there. Upon a refresh you will get the result you are looking for, but I have not solved this new issue.

The solution to the infinite loop is to use this in the service function

return $http.get('/posts').then(function(data){
        angular.copy(data.data, o.posts);
    });

The success syntax the the tutorial calls for does not work.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.