RequireJS and AngularJS multiple controllers

Question

I'm using latest version of Require and Angular, but i encountered strange bug. I have controller for every view, but apparently works only for one view. This is my example code:

Define all controllers: Controllers.js

define([
   'modules/index/controller',
   'modules/test/controller'
], function(){});

Here works only with one controller, if i include 2 like here i get Error: ng:areq Bad Argument

Index: controller.js

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

   'use strict';

   return angular.module('myApp.controllers', [])

   .controller('indexCtrl', ['$scope' , function ($scope){
        alert("index ok");
   }]);

});

Test: controller.js

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

   'use strict';

   return angular.module('myApp.controllers', [])

   .controller('testCtrl', ['$scope' , function ($scope){
    alert("test ok");
    }])

});

Where i'm wrong?

Answer 1

The problem is that you are creating the myApp.controllers module twice and one is overwriting the other. Assuming that you are manually bootstrapping angular after loading the controller, what you should be doing is to create the module first, then load that module to create controller:

app.js

define(['angular'], function(){
   'use strict';
   return angular.module('myApp.controllers', []);
});

Index: controller.js

define(['app'], function(app){
   'use strict';
   return app.controller('indexCtrl', ['$scope' , function ($scope){
        alert("index ok");
   }]);
});

Test: controller.js

define(['app'], function(app){
   'use strict';
   return app.controller('testCtrl', ['$scope' , function ($scope){
    alert("test ok");
    }])
});

I created angularAMD to facilitate use of RequreJS and AngularJS that might be of interest to you:

http://marcoslin.github.io/angularAMD/