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?
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?
Share Improve this question edited May 11, 2015 at 17:30 scniro 17k8 gold badges66 silver badges107 bronze badges asked Aug 22, 2013 at 11:01 OmarOmar 8,14514 gold badges63 silver badges109 bronze badges3 Answers
Reset to default 19Change 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'
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', []);
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: '/' });
});