angularjs + requirejs结构，建立一个庞大的模块化应用 [英] angularjs + requirejs structure to build a huge modular app

问题描述

我试图建立一个庞大的模块化的Web应用程序与AngularJs和RequireJS。这是我的目录我想建立：

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

在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

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

现在，我要完成的code更换控制器和视图，在上面RequireJs。我怎样才能做到这样？

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

推荐答案

RequireJS和AngularJS的使用遗憾的是并不简单。基本的原则是，你需要初始化过程中缓存提供者和利用这些提供商RequireJS模块创建控制器。下面是初始化的样子：

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

下面是丹Wahlin一个博客贴子，详细解释机制：

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还承诺解决使用ES6语法这个问题。你可以在这里找到关于它的更多信息：

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

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

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

这篇关于angularjs + requirejs结构，建立一个庞大的模块化应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！