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/

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

1 个答案: