making angular Service more modular

Question

I am working with the John Papa style guide. https://github.com/johnpapa/angular-styleguide#style-y061. I like the styling, and it does seem to make my code much easier to read. However, I following the separate data calls .

In this John Papa places the return object at the top of the service. Inside of the function statements are created at the bottom and hoisted to the top when the function is called.

The getCustomerListComplete function is consoling out the Json file as it would expect. I made sure to return response.data.

The problem is that the return statement does not seem to be sending the data to the controller.

return {

  getCustomers: getCustomers
}    

Start of the service ******

  (function() {
    angular
        .module('app.services',[])
        .factory('customersFactory', customersFactory);

    function customersFactory($http, $log) {

        return {
            getCustomers: getCustomers
        };
        function getCustomers(){
            $http.get('./Services/customers.json')
                .then(getCustomerListComplete)
                .catch(getCustomerListFailed);

                function getCustomerListComplete(response) {
                    console.log('response.data',response.data);
                    return response.data;
                }

                function getCustomerListFailed(error) {
                    console.log('error', error);
                }
        }
    }

}());

Inside of my controller I am getting errors on the promise (then). Noting that it cannot read undefined.

Cannot read property 'then' of undefined

Here is my controller. I believe that I am setting it up and using it correctly. customersFactory is being injected. The active function is being called. Not sure what could be the problem.

 (function() {
    'use strict';

    angular
        .module('app.customers')
        .controller('CustomerController', CustomerController);

        function CustomerController($stateParams, customersFactory) {
            var vm = this;
            vm.customers = [];
            vm.orders = null;
            // table sorting
            vm.sortBy = 'name';
            vm.reverse = false;
            vm.doSort = doSort;

            activate()
            function activate() {
                return getCustomersList().then(function() {
                    console.log('activated')
                });
            }

            function getCustomersList() {
                return customersFactory.getCustomers()
                    .then(function(data) {
                        vm.customers = data;
                        return vm.customers;
                    });
            }

            function doSort(propName) {
                vm.sortBy=propName;
                vm.reverse=!vm.reverse
            }
        }
})();

Answer 1

I also follow that John Papa's style guide and I have never seen he doing that because everything should be inside the function closure, i.e.:

(function () {
  ....
})();

But yes, like Wayne said you should

return $http.get(...)

Btw, if he does speak about returning outside the closure please try to tell me where.

Answer 2

You need to return $http.get inside getCustomers:

return $http.get('./Services/customers.json')