Структура angularjs + requirejs для создания огромного модульного приложения

Question

Я пытаюсь создать огромное модульное веб-приложение с AngularJs и RequireJS. Это мой каталог, который я хочу построить:

|--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

В 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'
        });
}]);

И для 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
}]);

Теперь я хочу завершить код для замены контроллера и просмотра выше с RequireJs. Как я могу сделать это?

Answer 1

Использование RequireJS и AngularJS, к сожалению, не просто. Основной принцип заключается в том, что вам нужно кэшировать провайдера во время инициализации и использовать его для создания контроллера в модулях RequireJS. Вот как выглядит инициализация:

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
        };
    }
);

Вот сообщение в блоге от Дэна Уолина, в котором подробно объясняется механизм:

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

AngularJS 2.0 также пообещал решить эту проблему, используя синтаксис ES6. Вы можете найти больше информации об этом здесь:

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

Если вам что-то нужно немедленно, я создал следующее для удовлетворения моих потребностей:

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