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/）的方法，但我认为它使用Angular的核心方法太麻烦了。

我的问题是：在我的情况下，为我的每个模块使用不同的AngularJS模块是否有意义，例如：

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

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

我问这个，因为AngularJS 2.0将支持本机延迟加载。谷歌的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来编译所有这些东西，到目前为止它已经很好地工作了。

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

1 个答案: