Unknown provider: postPromiseProvider <- postPromise <- MainCtrl - angularjs

Question

I have my angularApp written
var app = angular.module('flapperNews', ['ui.router']);
app.factory('posts', ['$http',function($http) {
var posts = [
{ title: 'post 1', upvotes: 5 },
{ title: 'post 2', upvotes: 2 },
{ title: 'post 3', upvotes: 15 },
{ title: 'post 4', upvotes: 9 },
{ title: 'post 5', upvotes: 4 }
];
var service = {};
service.getAll = function() {
return $http.get('/posts').success(function(data){
angular.copy(data, posts);
});
};
service.create = function(post) {
return $http.post('/posts', post).success(function(data){
posts.push(data);
});
};
service.getPosts = function() {
return posts;
};
service.upvote = function(post) {
return $http.put('/posts/' + post._id + '/upvote').success(function(data){
post.upvotes += 1;
});
};
service.get = function(id) {
return $http.get('/posts/'+id).then(function(res) {
return res.data;
});
}
return service;
}]);
app.controller('MainCtrl', ['$scope', 'postPromise',
function($scope, postPromise) {
$scope.posts = postPromise;
$scope.title = null;
$scope.link = null;
$scope.test = "Hello World";
$scope.addPost = function() {
if (!$scope.title || $scope.title === '') {
return;
} else {
posts.create({
title: $scope.title,
link: $scope.link,
});
$scope.link = '';
$scope.title = '';
}
};
$scope.incrementUpvotes = function(post) {
posts.upvote(post);
};
}
]);
app.controller('PostsCtrl', [
'$scope',
'posts',
'post',
function($scope, posts, post) {
$scope.post = post;
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}
]);
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',
resolve: {
post: ['$stateParams', 'posts', function($stateParams, posts) {
return posts.get($stateParams.id);
}]
}
});
$urlRouterProvider.otherwise('home');
}
]);
When I load the Homepage I get an error saying
Unknown provider: postPromiseProvider <- postPromise <- MainCtrl
I do not understand this.
I have tried restructuring the code, placing the factory above the Controllers, but it still throws the same error.
PS - The network call to retrieve posts is made (I can see it in the Browser Netwrok calls)

Answer 1

The name of your factory is posts not postPromise.
Change your MainCtrl to:
app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
});