Argument 'ContactsCtrl' is not a function, got undefined

javascript angularjs

14,288

Solution 1

You are redefining your app in index.js, so the controller created in contacts.js is lost. Remove this line from index.js:

var myApp = angular.module('contacts', []);

Solution 2

Change your index.html like this;

<script src="index.js"></script>
<script src="contacts.js"></script>

And in your contact.js change

var myApp = angular.module('contacts', []); to

var myApp = angular.module('contacts');

Angular module with two arguments like angular.module('contacts', []); will create a new module, but angular module with single argument like angular.module('contacts'); will pick up the existing module. Here in this case 'contacts'

Solution 3

I would suggest to create two different module names one in the index.js ( This would be the app name that you would refer in the html ng-app attribute) and other in contacts.js (The module name for the controllers). In the index.js create a dependecy to the contacts.js`. I was able to fix the problem by doing the below.

Updated contacts.js Here i updated the contacts to contactsController

var myApp = angular.module('contactsController', []);
myApp.controller('ContactsCtrl', function ($scope) {
$scope.name = "omar";
});

Updated index.js Here i added the contactsController as the dependency. I found it easier to name this as app.js. This way ng-app is always mapped to the module name in app.js.

 var myApp = angular.module('contacts', [contactsController]);

  myApp.config(function ($routeProvider) {
   $routeProvider
    .when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
   //.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
   .otherwise({ redirectTo: '/' });
   });

14,288

Omar

Updated on September 14, 2022

Comments

Omar over 1 year

I'm having a problem in AngularJS routing and controllers. Here is the code:

Index.html

<!DOCTYPE html>
<html ng-app="contacts">
<head>
    <script src="libs/angular.min%20(1).js"></script>
    <script src="contacts.js"></script>
    <script src="index.js"></script>
    <title></title>
</head>
<body >

    <div data-ng-view=""></div>


</body>
</html>

index.js

var myApp = angular.module('contacts', []);

myApp.config(function ($routeProvider) {
    $routeProvider
     .when('/', { controller: 'ContactsCtrl', templateUrl: '/views/show-contacts.html' })
     //.when('/view2', { controller: 'MyCont', templateUrl: 'V2.htm' })
     .otherwise({ redirectTo: '/' });
});

contacts.js

var myApp = angular.module('contacts', []);
myApp.controller('ContactsCtrl', function ($scope) {
    $scope.name = "omar";
});

but I'm getting this error:

Argument 'ContactsCtrl' is not a function, got undefined

Any help?

BKM over 10 years

In the index.js he already created the app using var myApp = angular.module('contacts', []);. So he don't need to create another one in his contact.js. Instead of that just initialize the app as var myApp = angular.module('contacts');. Because the app is created in index.js he has to load it before loading contact.js file.
Pavlo over 10 years

Got it! angular.module() with one argument will not make a new module, but pick up the existing one. You should update your answer with explanation.