Q:

Angular Factory Function not working

I'm learning how to use Angularjs with ROR through this tutorial https://thinkster.io/angulartutorial/angular-rails/
I'm at a point where when I'm adding a new function for a service which is supposed to get all posts I have in the db. However, when I run the code, the page does not load anymore, and my there is no DB call in my server log. Everything was working fine before making this change. If someone could have a look at it, that would be great. Note that my Rails route returns json just fine.
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',
      resolve: {
        postPromise: ['posts', function(posts){
          return posts.getAll();
        }]
      }
    })
    .state('posts', {
       url: '/posts/{id}',
      templateUrl: 'posts/_posts.html',
       controller: 'PostsCtrl'
    });

  $urlRouterProvider.otherwise('home');
}]);

posts/posts.js
angular.module('flapperNews')
.factory('posts', [
  'http',
  function($http){
  var o = {
    posts: []
  };

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

  return o;
}]);

posts/postsCtrl.js
angular.module('flapperNews')
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
  $scope.post = posts.posts[$stateParams.id];
  $scope.addComment = function(){
  if($scope.body === '') { return; }
    $scope.post.comments.push({
      body: $scope.body,
      author: 'user',
      upvotes: 0
    });
    $scope.body = '';
  };
}]);

home/mainCtrl.js
angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
  $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;
  }
}]);

A:

the named http service you're injecting into your factory is 'http', it should be '$http', then you can name it whatever you want in the factory function
angular.module('flapperNews')
.factory('posts', [
  'http',
  function($http){
  var o = {
    posts: []
  };

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

  return o;
}]);

should be 
angular.module('flapperNews')
.factory('posts', [
  '$http',
  function(anyName){
  var o = {
    posts: []
  };

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

  return o;
}]);

