Angular module loading error

Question

I have an angular project that I'm breaking out into a better file structure but I'm getting Argument 'fn' is not a function, got undefined for an error when creating a new service. Any ideas what I'm doing wrong?

app.js

angular.module('app', [
'app.controllers'
]);

angular.module('app.controllers', ['leaflet-directive', 'app.services']);

angular.module('app.services', []);

main.controller.js

angular.module('app.controllers')
.controller('MainCtrl', MainCtrl);

function MainCtrl($scope, $window, leafletData, DataService) {
    var main = this;

    main.items = DataService.GetItems();

    //Other controller stuff
};

data.service.js

angular.module("app.services")
.factory('DataService', DataService);

var DataService = function(){
    return data = {
        getItems: function(){
            return [//data here];
        }
    };
}

Answer 1

Your declaration of DataService is the problem. You're declaring it after you're using it. You should change your declaration of DataService to function DataService() instead of setting it to a var to take advantage of function hoisting