angularjsangularjs-controllerangularjs-module

How to solve angular module got undefined


I have four controllers in separate files

  1. InvoiceCtrl
  2. BillingCtrl
  3. InvoicePaymentCtrl
  4. InvoiceViewCtrl

2, 3, 4 have this angular.module('invoice.controller',[])

1 has this angular.module('test',[])

in my app.js i am using following code

angular.module('invoiceapp', ['invoice.controller','test','starter.services','ngDialog','angularMoment'])

Now whenever i try to change 1 same with 2,3,4

Argument 'InvoiceCtrl' is not a function, got undefined

Also i tried removing the [] in angular.module for each controller

Any one know how to solve this problem

Thanks in advance !

P.S each controller is in a separate file.

billing.controller.js
payment.controller.js
invoice.controller.js
view.controller.js

angular.module('invoice.controller', [])

.controller('BillingCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Billing OK!';

});

angular.module('invoice.controller', [])

.controller('InvoicePaymentCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice Payment OK!';

});

angular.module('invoice.controller', [])

.controller('InvoiceCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice OK!';

});

angular.module('invoice.controller', [])

.controller('InvoiceViewCtrl', function($scope,$http,Dialogs,Invoices){

    $scope.status = 'Invoice View OK!';

});

Solution

  • The moment you do this:

    angular.module('invoice.controller', [])
    

    You create a brand new module, you can leave out the subsequent module declarations and just use Controllers like this:

    // app.js file
    angular.module('invoice.controller', [])
    
    // File #1
    angular.module('invoice.controller')
    .controller('BillingCtrl', function($scope,$http,Dialogs,Invoices){
    
        $scope.status = 'Billing OK!';
    
    })
    
    // File #2
    angular.module('invoice.controller')
    .controller('InvoicePaymentCtrl', function($scope,$http,Dialogs,Invoices){
    $scope.status = 'Invoice Payment OK!';
    })
    
    // File #3
    angular.module('invoice.controller')
    .controller('InvoiceCtrl', function($scope,$http,Dialogs,Invoices){
        $scope.status = 'Invoice OK!';
    }) 
    
    // File #4
    angular.module('invoice.controller')
    .controller('InvoiceViewCtrl', function($scope,$http,Dialogs,Invoices){
        $scope.status = 'Invoice View OK!';
    });
    

    Notice the lack of the [] on the module? this is because using [] creates another instance of the application itself :)