angularjs + requirejs structure to build a huge modular app

Question

I'm trying to build a huge Modular Web App with AngularJs and RequireJS. This is my directory that I want to build:

|--index.html
|--css
|--images
|--libs
|  └--angular.js
|  └--angular-route.js
|  └--require.js
|
|--js
|  └--app.js
|  └--controller.js
|
└--module
   |--user
   |  |--controller
   |  |  └--index.js (that is controller to list all users)
   |  |  └--add.js (this controller to add new user)
   |  |--service
   |  |  └--user.js
   |  └--template
   |     └--index.tpl.html
   |     └--add.tpl.html
   |  
   └--photo  
      |--controller
      |  └--index.js
      |  └--add.js
      |--service
      |  └--photo.js
      └--template
         └--index.tpl.html
         └--add.tpl.html

In app.js

'use strict';
var hugeApp = angular.module('hugeApp', [
    'ngRoute',
    'mainController'
]);

hugeApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/:fullpath', {
            templateUrl: 'main.html',
            controller: 'RouteController'
        }).
        otherwise({
            templateUrl: 'main.html',
            controller: 'RouteController'
        });
}]);

And for controller.js

'use strict';

var mainController = angular.module('mainController', []);

mainController.controller('RouteController', ['$scope', '$routeParams', function($scope, $routeParams) {
    // I will use url link to find the right sub-controller
    // example:
    //   #/user:index
    //   #/user:add

   /* This is Some code to find moduleId and ControllerId */

   var moduleId = 'user';
   var controllerId = 'index';

   //  This is the code by using requireJS to replace
   //  controller to /module/user/controller/index.js
   //  and view to /module/user/template/index.html
}]);

Now, I want to complete the code to replace controller and view in above with RequireJs. How can I do like that?

Eyde

Answer 1

Use of RequireJS and AngularJS is unfortunately not simple. The basic principal is that you need to cache the provider during initialisation and use these provider to create controller in RequireJS modules. Here is what initialisation looks like:

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

app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
    function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
        app.register =
        {
            controller: $controllerProvider.register,
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            factory: $provide.factory,
            service: $provide.service
        };
    }
);

Here is a blog post from Dan Wahlin that explain the mechanism in detail:

• http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

AngularJS 2.0 also promised to solve this problem using ES6 syntax. You can find more info about it here:

• http://blog.angularjs.org/2014/03/angular-20.html

If you need something immediately, I created the following to address my needs:

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

Bellbottoms