I'm building a practice app in Angular using Yeoman. I'm trying to keep my controllers in separate files.
However, when going to my "register" route, it throws an error in Chrome dev tools:
"Error: [ng:areq] Argument 'RegisterCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.6/ng/areq?p0=RegisterCtrl&p1=not%20aNaNunction%2C%20got%20undefined".
Even though it throws an error, I'm still able to visit the register page and see the "hello world" content.
I've looked at:
- AngularJS: How do I create controllers in multiple files
- How to create separate AngularJS controller files?
But neither helped solve my problem, despite trying some of their recommendations.
Currently, my app is laid out as:
app
...
--scripts
---controllers
-----main.js
-----register.js
---app.js
...
When I move the contents of register.js into Main.js, it no longer throws an error.
App.js looks like this:
angular.module('angYeomanApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Main.js:
angular.module('angYeomanApp')
.controller('MainCtrl', function ($scope) {
});
Register.js:
angular.module('angYeomanApp')
.controller("RegisterCtrl", function ($scope) {
});
Any help would be much appreciated!
