AngularJS - Factory.function(…) is undefined

Question

I want to start off by saying I am very new to AngularJS so any help would be appreciated!

I am trying to collect some JSON data from a URL in a factory function and then return the data to the controller, but it throws an error saying that the function doesn't exist. I have been following along with a tutorial series on Udemy, but the data I am collecting is coming from a different source so the answer isn't in the videos.

Code:

angular.module('MainModule', ['ngRoute']);
angular.module('MainModule').config(function($routeProvider){
    $routeProvider.when('/', {
        templateUrl: '/templates/index.html'
    });
    $routeProvider.when('/item/:id', {
        templateUrl: '/templates/item.html',
    });
});
angular.module('MainModule').controller('ItemsController', function($scope, ItemsFactory, MainSettings){
    ItemsFactory.getItems().then(function(response){
        $scope.items = response;
    });
    $scope.settings = MainSettings;
});
angular.module('MainModule').controller('ItemController', function($scope, $routeParams, ItemsFactory, MainSettings){
    $scope.item = ItemsFactory.getItem($routeParams.id);
    $scope.settings = MainSettings;
});
angular.module('MainModule').factory('ItemsFactory', function($http, $log){
    var factory = {};
    var items = false;
    factory.getItems = function(){
        $http.get('/index.php').success(function(response){
            items = response.items;
            return items;
        });
    };
    factory.getItem = function(item){
        var i = 0;
        while (i < items.length) {
            if (items[i].id == item) {
                return items[i];
            }
            i++;
        }
        return false;
    };
    return factory;
});
angular.module('MainModule').constant('MainSettings', {
    title: 'Simple RSS Reader',
    version: '1.0'
});

Error:

Error: ItemsFactory.getItems(...) is undefined
@http://192.168.1.234:1000/js/angular-module.js:11:2
invoke@http://192.168.1.234:1000/js/angular.js:3965:14
instantiate@http://192.168.1.234:1000/js/angular.js:3976:23
$ControllerProvider/this.$get</<@http://192.168.1.234:1000/js/angular.js:7307:18
nodeLinkFn/<@http://192.168.1.234:1000/js/angular.js:6696:34
forEach@http://192.168.1.234:1000/js/angular.js:332:11
nodeLinkFn@http://192.168.1.234:1000/js/angular.js:6683:11
compositeLinkFn@http://192.168.1.234:1000/js/angular.js:6131:13
publicLinkFn@http://192.168.1.234:1000/js/angular.js:6027:30
ngViewFillContentFactory/<.link@http://192.168.1.234:1000/js/angular-route.js:915:7
nodeLinkFn@http://192.168.1.234:1000/js/angular.js:6737:13
compositeLinkFn@http://192.168.1.234:1000/js/angular.js:6131:13
publicLinkFn@http://192.168.1.234:1000/js/angular.js:6027:30
createBoundTranscludeFn/boundTranscludeFn@http://192.168.1.234:1000/js/angular.js:6151:21
controllersBoundTransclude@http://192.168.1.234:1000/js/angular.js:6758:18
update@http://192.168.1.234:1000/js/angular-route.js:865:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://192.168.1.234:1000/js/angular.js:13070:15
updateRoute/<@http://192.168.1.234:1000/js/angular-route.js:547:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://192.168.1.234:1000/js/angular.js:11659:31
qFactory/defer/deferred.promise.then/wrappedCallback@http://192.168.1.234:1000/js/angular.js:11659:31
qFactory/ref/<.then/<@http://192.168.1.234:1000/js/angular.js:11745:26
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://192.168.1.234:1000/js/angular.js:12788:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://192.168.1.234:1000/js/angular.js:12600:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://192.168.1.234:1000/js/angular.js:12892:13
done@http://192.168.1.234:1000/js/angular.js:8427:34
completeRequest@http://192.168.1.234:1000/js/angular.js:8641:7
createHttpBackend/</xhr.onreadystatechange@http://192.168.1.234:1000/js/angular.js:8580:1

<div class="ng-scope" ng-view="">

Thanks in advance, Matt!

Answer 1

My issue was similar to this and I resolved it by injecting my Factory like so -

angular.module('MainModule').controller('ItemsController', ['ItemsFactory', function($scope, ItemsFactory, MainSettings){
    ItemsFactory.getItems()
    .success(function(response) {..})
    .error(function(response) {..})
    .then(function(response){
        $scope.items = response;
    });
    $scope.settings = MainSettings;
}]);

You would to eventually do this if you decide to use a minification library or RequireJS. More information here in the official documentation.

Answer 2

Both fixes, separately and together remove the error, but the data still isn't returned. Does the order that the injections are listed in the controller make any difference to the way they work?