CODEWITHSUNDEEP
angularjsangularjs-controllerangularjs-module
Binsoi
Binsoi

Reputation: 383

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!';

});

Upvotes: 1

Views: 2468

Answers (2)

NewZeroRiot
NewZeroRiot

Reputation: 552

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 :)

Upvotes: 1

tato
tato

Reputation: 5549

This code: 

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

creates one new module.

You need to structure your code to create modules once, before using them. And then you attach controllers by getting a reference to the module created before:

var module = angular.module('invoice.controller');

I would do this:

  • In app.js file I would do:

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

  • And then, in every other file, I would reference the module with

    var module = angular.module('invoice.controller'); module.controller('InvoiceCtrl',...)

Upvotes: 0

Related Questions