factory not loading in controller

Question

I'm writing I think a fairly straightforward factory (as part of a tutorial) but I can't get it to load in my controller. The tutorial I am following uses $scope and I am rewriting everything with 'controller as'.

Here is my factory function:

(function(){
    var customersFactory = function(){
        console.log('running');
        var customers=[
            {
                id: 1, 
                joined: '2000-12-02', 
                name:'John', 
                city:'Chandler', 
                orderTotal: 9.9956,
                orders: [
                    {
                        id: 1,
                        product: 'Shoes',
                        total: 9.9956
                    }
                ]
            }, 
            {
                id: 2, 
                joined: '1965-01-25',
                name:'Zed', 
                city:'Las Vegas', 
                orderTotal: 19.99,
                orders: [
                    {
                        id: 2,
                        product: 'Baseball',
                        total: 9.995
                    },
                    {
                        id: 3,
                        product: 'Bat',
                        total: 9.995
                    }
                ]
            },
            {
                id: 3, 
                joined: '1944-06-15',
                name:'Tina', 
                city:'New York', 
                orderTotal:44.99,
                orders: [
                    {
                        id: 4,
                        product: 'Headphones',
                        total: 44.99
                    }
                ]
            }, 
            {
                id: 4, 
                joined: '1995-03-28',
                name:'Dave', 
                city:'Seattle', 
                orderTotal:101.50,
                orders: [
                    {
                        id: 5,
                        product: 'Kindle',
                        total: 101.50
                    }
                ]
            }
        ];
        var factory = {};
        console.log(customers);
        factory.getCustomers = function(){
            return customers
        };
        return factory;
    };   

    angular.module('customersApp')
        .factory('customersFactory', customersFactory);
}());

and here is my first controller:

(function(){
    var CustomersController = function(customersFactory) {
        var vm = this;
        vm.sortBy = 'name';
        vm.reverse = false;
        vm.customers = [];  //placeholder

        init = function(){
            vm.customers=customersFactory.getCustomers();
        };

        init();

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

    CustomersController.$inject = ['$routeParams', 'customersFactory'];

    angular.module('customersApp')
    .controller('CustomersController', CustomersController);
}());

This controller is attached to a view that uses an ng-repeat to make a table of customer data. This worked fine before refactoring for a factory.

The factory function is running when I start up, but it doesn't seem to be recognized in my controller. I get the error:

angular.js:13920 TypeError: customersFactory.getCustomers is not a function at init (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:12:43) at new CustomersController (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:15:9) at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:4733:14) at $controller (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:10369:28) at Object.link (http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/scripts/angular-route.js:1001:26) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:1247:18 at invokeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9934:9) at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9335:11) at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8620:13) at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8500:30) (anonymous function) @ angular.js:13920(anonymous function) @ angular.js:10467invokeLinkFn @ angular.js:9936nodeLinkFn @ angular.js:9335compositeLinkFn @ angular.js:8620publicLinkFn @ angular.js:8500lazyCompilation @ angular.js:8844boundTranscludeFn @ angular.js:8637controllersBoundTransclude @ angular.js:9385update @ angular-route.js:959$broadcast @ angular.js:18005(anonymous function) @ angular-route.js:643processQueue @ angular.js:16383(anonymous function) @ angular.js:16399$eval @ angular.js:17682$digest @ angular.js:17495$apply @ angular.js:17790done @ angular.js:11831completeRequest @ angular.js:12033requestLoaded @ angular.js:11966 http://127.0.0.1:65178/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

What am I doing wrong?

Kindzoku Kindzoku · Accepted Answer · 2016-09-12T06:38:52

You're injecting two services

CustomersController.$inject = ['$routeParams', 'customersFactory'];

But there is only one argument.

var CustomersController = function(customersFactory) {

Just add $routeParams to controller:

var CustomersController = function($routeParams, customersFactory) {

Why do you use anonymouse functions? It's better to write like this:

angular.module('customersApp').controller('CustomersController', CustomersController);

CustomersController.$inject = ['$routeParams', 'customersFactory'];
function CustomersController($routeParams, customersFactory) {
}

It's a lot cleaner.

factory not loading in controller

1 Answers