Angular controllers in own files, undefined is not a function

Question

I'm refactoring some angular code and I want to separate things by type (controllers in a controllers folder, etc.).

I have two controllers and an app.js file. Why am I getting, and what does this undefined is not a function mean (I get an error in the console from both of my separate controller files)

app.js
var app = angular.module('myApp',['myApp.controllers']);

controllers
app.module('myApp.controllers').controller('DocumentController',function($scope){
    $scope.message = "This is the message from Document controller";
})
//
app.module('myApp.controllers').controller('MyController', function ($scope) {
    $scope.message = "This is the message from My Controller";
})

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/jquery-1.9.1.js"></script>
    <script src="lib/angular-1.2.js"></script>
    <script src="app.js"></script>
    <script src="controllers/MyController.js"></script>
    <script src="controllers/DocumentController.js"></script>
</head>
<body>

    this is from the index.html page
    <div ng-controller="MyController">
        {{message}}
    </div>
<script>

</script>
</body>
</html>

use angular.module instead of app.module. you app is an already defined module yu can not create a modle out of a module app.module==undefined — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 4, 2014 at 1:22
@DayanMorenoLeon I had tried that as well, that gives me an Uncaught Object error for both my controllers — wootscootinboogie
– wootscootinboogie, Commented Jun 4, 2014 at 1:24
do you need a new module for the controllers? If not can just use app.controller(... and skip the injection. Otherwise you need to create a module properly with dependencies argument — charlietfl
– charlietfl, Commented Jun 4, 2014 at 1:25
@charlietfl this is very much an exploratory phase for me. I'm not sure that I need a different module for controllers, services etc. But having everything in one giant file like I was doing is certainly not the way to go :) — wootscootinboogie
– wootscootinboogie, Commented Jun 4, 2014 at 1:30
generally don't need to create modules unless you want them to be portable to other projects. Modules that only contain controllers though aren't very practical, generally better to modularize functionality or features so a module would contain directives and services needed to compliment controlelrs — charlietfl
– charlietfl, Commented Jun 4, 2014 at 1:34

rob · Accepted Answer · 2014-06-04 01:26:41Z

1

You need to declare the 'myApp.controllers' module before you can use it. To declare it you need to pass an array of dependencies into angular.module. Try changing app.js to this:

app.js

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

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

controllersApp.controller('DocumentController',function($scope){
    $scope.message = "This is the message from Document controller";
})

controllersApp.controller('MyController', function ($scope) {
    $scope.message = "This is the message from My Controller";
})

answered Jun 4, 2014 at 1:26

rob

18.7k13 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wootscootinboogie Over a year ago

swish, thanks. what's your thought on the number of modules that you should have in an angular application, by the way? I've heard conflicting reports on the number that should be used.

rob Over a year ago

I put each controller into it's own file but add them all to the same module. If that module starts getting too big to maintain then I'd break it into smaller modules. You also sometimes need to make smaller modules when you want to test something like a controller without running your main apps config section. For really big apps I've head of people putting every controller, directive, service, etc. into it's own module but I wouldn't worry about doing that until a need arises

Collectives™ on Stack Overflow

Angular controllers in own files, undefined is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related