angularjs + requirejs 结构构建一个巨大的模块化应用程序

Question

我正在尝试使用 AngularJs 和 RequireJS 构建一个巨大的模块化 Web 应用程序。这是我要构建的目录：

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

这是 Dan Wahlin 的一篇博文，详细解释了该机制：

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