How to download controllers of another module dynamically with AngularAMD ?

[himanshu3535]

I am using AngularAMD for downloading controllers dynamically but I am facing an issue with this. Actually, I have 2 modules "AppModule" and "CategoryModule". Each module has its own controllers, services and directives and config file for routing logic.

I am injecting "CategoryModule" into "AppModule" as a dependency and want to download controllers of "CategoryModule" dynamically.

I have configured AngularAMD for "AppModule" and it is working fine. I am able to download controllers of "AppModule" but when I am trying to download controllers of "CategoryModule" then it is not working. I am using State routing and each module has its own routing configuration.

I want to know how to configure AngularAMD for two modules with separate routing file or you can say separate config file.

There are two config files:

1. AppModule.config(// routing logic for AppModule).
2. CategoryModule.config (// routing logic for CategoryModule)

CategoryModule is injected into AppModule. Please help me I am stuck here.

[marcoslin]

Could you provide some code sample as I am not sure what is in your AppModule and CategoryModule. If your CategoryModule is an independent module, ie, created using angular.module('CategoryModule', []), then you should be loading it using ngload.

[himanshu3535]

1. Main.js :

require.config({ baseUrl: "App/Main",
paths: { 'angular': '/App/Main/vendor/angular', 'ngload': '/App/Main/vendor/ngload', 'angular-ui-router': '/App/Main/vendor/angular-ui-router', 'angularAMD': '/App/Main/vendor/angularAMD.min'
'category-module': '/App/Main/controllers/category-module'
},
shim: { "angular": { exports: 'angular' }, 'angularAMD': ['angular'], 'ngload': ['angularAMD'],
'category-module': ['angular'] },
deps: ['app'] });

2. app.js

define(['angularAMD', 'angular-ui-router', 'category-module'], function (angularAMD) { var app = angular.module('USGA', ['ui.router', 'categoryModule']);
angularAMD.bootstrap(app); return app; });

3. CategoryModule.js

define(['angularAMD', 'angular-ui-router'], function (angularAMD) { var categoryModule = angular.module('categoryModule', []); categoryModule.config([ '$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

    $stateProvider           
     .state('root.home.playerSearch', {
         url: '/golf',
         views: {
             "container@root": angularAMD.route({
                 templateUrl: '/App/Main/views/golfer-management/player-search.cshtml',
                 controller: 'PlayerSearch',
                 controllerUrl: '/App/Main/controllers/golfer-management/player-search.js'
             })
         }
         });      
return categoryModule;

});

4. player-search.js

categoryModule .controller("PlayerSearch", ['$scope', function ($scope) { $scope.test = 'Test'; }]);

This is the whole code. Now I am getting exception :

"Uncaught ReferenceError: categoryModule is not defined" in player-search.js file.

Please suggest me how to get rid of this exception ? Thanks in advance.

[hussainb]

Any updates on this, I too need the same functionality of defining multiple modules.

[marcoslin]

Hi, sorry for delay but day job continue to be extremely demanding.

There are few things that doesn't look right from the code you pasted here but let's assume that everything works and you are able to get to the point of launching the player-search.js file.

If your code in player-search.js indeed start with:

categoryModule .controller ...

You really need to take a closer look at how RequireJS works, and the error is telling you where the problem is: you never declared variable categoryModule. You should be loading the dependencies using define keywords.