Modularize AngularJS应用程序:一个或多个AngularJS模块？

Question

我尝试使用AngularJS构建模块化应用程序.我的第一个想法是通过functionnality将每个模块分组为这种文件夹结构:

/core 
    controllers.js
    directives.js
    app.js
/modules
     /users
        controllers.js
        directives.js
     /invoices
        controllers.js
        directives.js
     /messages        
        controllers.js
        directives.js
     ...

请注意,"core"文件夹包含将始终位于应用程序中的基本功能.其他模块可以单独添加或删除.

由于我的应用程序很大,我也想使用延迟加载.我实现了这个解决方案:http://ify.io/lazy-loading-in-angularjs/在我看来实际上是最简单的方法.问题是它只对控制器,服务,指令进行延迟加载......但不适用于AngularJS模块.

我知道还有另一种允许延迟加载Angular模块的方法(http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/)但是我认为这太过于hacky,因为它使用Angular的核心方法.

我的问题是:在我的情况下,为我的每个模块使用不同的AngularJS模块是否有意义,如下所示:

angular.module('core', ['ngRoute', 'users', 'invoices', 'messages'])
angular.module('users')
angular.module('invoices')
angular.module('messages')

这种方法的优点是什么？AngularJS模块目前是否有用 - 仅适用于Angular的第三方模块？

我问这个,因为AngularJS 2.0将支持本机延迟加载.来自Google的MiškoHevery说"你应该按视图分组,因为在不久的将来,视图将被延迟加载",并且我们应该为每个应用程序使用一个模块,请参阅此处:https://www.youtube.com/watch？ v =&ZhfUv0spHCY T = 34m19s

对于大型应用程序来说,只为我的应用程序使用一个模块是正确的,如下所示:

angular.module('core', ['ngRoute']);

然后根据路由或视图延迟加载我的控制器,服务和指令？

Answer 1

我们的结构（在一个非常大的应用程序上）与您在这里提出的结构类似，只是没有将控制器、服务等捆绑到单个 .js 文件中。相反，我们只是将我们的关注点与视图、服务等捆绑到一个模块中。因此，每个有意义的组件可能如下所示：

/my-component
    - i-do-something.js
    - a-view.html
    - a-view-that-is-a-child.html
    - a-view-ctrl.js
    - index.js //the thing that creates a module and returns it
    / tests
         - i-do-something-spec.js
         - a-view-ctrl-spec.js

这一切都捆绑到一个应用程序模块中（以我们的组织命名）。然后一个简单的引导模块angular.bootstrap(['app'])就完成了整个事情。我们用来browserify编译所有这些东西，到目前为止效果很好。