Error when loading controllers declared in another file

[victorjussiani]

Good night, you could help me with the following problem?

I am creating my application divided into modules, these modules are determined by functionality. So I have a file that defines the module and routes that he possesses, and other files that are the controllers, services, etc.

However when I try to load the controllers is giving these error:

Error: [ng:areq] http://errors.angularjs.org/1.2.16/ng/areq?p0=AuthenticationController&p1=not%20a%20function%2C%20got%20undefined

The scenario is as follows:

app.js

define(['angular', 'angularAMD' , 'angular-route', 'AuthenticationModule'], function (angular, angularAMD) {

    var app = angular.module('app', ['ngRoute', 'AuthenticationModule']);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.otherwise({redirectTo: '/'});
    }]);

    return angularAMD.bootstrap(app);

});

AuthenticationModule.js

define(['angular', 'angularAMD'], function (angular, angularAMD) {

    angular.module('AuthenticationModule', []);

    angular.module('AuthenticationModule').config(['$routeProvider', function ($routeProvider) {

        $routeProvider
            .when('/login', angularAMD.route({
                templateUrl: 'views/login/index',
                controller: 'AuthenticationController',
                controllerUrl: 'ngload!AuthenticationController'
            }));
    }]);

});

AuthenticationController.js

define(['angular', 'AuthenticationModule'], function (angular) {

    angular.module('AuthenticationModule').controller('AuthenticationController', ['$scope', function ($scope) {
        ...
    }]);

});

[marcoslin]

It is not clear what you are trying to do here as I see 2 AuthenticationModule.js?

Can you setup a plunker so I can take a further look?

[victorjussiani]

Sorry for the confusion, here is the plunk http://plnkr.co/edit/MQlsAfgRKPETTXVlXxdc . The error occurs when you try to access the url /login.

[marcoslin]

This is the tricky part of using 2 module system. What you are trying to do is creating a separate angular module and then performing lazy loading there. There are 2 options here:

1. There is really no need to create a separate module if you are using RequireJS. Your AuthenticationController can be easily be lazy loaded by your app
2. If you are trying to abstract away the authentication logic, you might consider to create a Provider (See Provider Recipe in the docs) and use it to configure your routes and as utilities in your controller.

If you opt for 2, remember that your Auth package should not be lazy loaded. Here is example of opt 2: http://plnkr.co/edit/fWgMywqT7s4oQw4yZLg4

Note that I cleaned up a bit your main.js as there is really no reason you need to load angular in your packages. It should simply be setup as dependency to angularAMD.