模块化AngularJS应用：一个或多个AngularJS模块？ [英] Modularize AngularJS application : one or multiple AngularJS modules?

问题描述

我尝试建立使用AngularJS一个模块化的应用程序。我的第一个想法是组的每个模块由functionnality用这种文件夹结构：

I try to build a modular application using AngularJS. My first idea is to group each module by functionnality with this kind of folder structure :

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

请注意，核心文件夹中包含基本功能，将永远是在应用程序。其他模块可以添加或删除独立。

Notice that the "core" folder contains basics features that will always be in the app. Others modules can be add or remove independently.

我的应用程序会很大，我也想用延迟加载。我实现这个解决方案： http://ify.io/lazy-loading-in-angularjs/ 这在我看来，其实最简单的方法。的问题是，它不仅会迟缓装载为控制器，服务指令...但不使用AngularJS模块

As my application will be large, I also want to use lazy loading. I implemented this solution : http://ify.io/lazy-loading-in-angularjs/ which seems to me actually the easiest way. The problem is that it only does lazy loading for controllers, services, directives ... but not for AngularJS modules.

我知道有它允许延迟加载角模块（另一种方式的 http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/ ），但我认为这是太哈克，因为它使用角的核心方法。

I know there is another way which permits to lazy load Angular modules (http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/) but I think it's way too hacky as it uses Angular's core methods.

我的问题是：是否有意义我的情况使用不同的AngularJS模块，我的每个模块，像这样的：

My question is : does it make sense in my case to use different AngularJS modules for each of my modules, like this :

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

什么是这种方法的优势在哪里？被AngularJS模块有用的 - 现在 - 只对角第三方模块

What is the advantage of this approach ? Are AngularJS modules usefull - for now - only for third-party modules for Angular ?

我要问这个，因为AngularJS 2.0将会支持原生懒加载。从谷歌MISKO Hevery说：[你]应该因为意见被认为集团将延迟加载在不久的将来，那我们应该使用每个应用程序的一个模块，看这里：的 https://www.youtube.com/watch?v=ZhfUv0spHCY&t=34m19s

I'm asking this since AngularJS 2.0 will support natively lazy loading. Miško Hevery from Google says "[you] should group by view since views will be lazy loaded in near future", and that we should use one module per application, see it here : https://www.youtube.com/watch?v=ZhfUv0spHCY&t=34m19s

它是正确的大型应用程序只使用一个模块为我的应用程序是这样的：

Is it correct for a large application to just use one module for my app like this :

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

然后延迟加载基于路线或视图控制器我，服务和指令？

And then lazy load my controllers, services and directives based on a route or a view ?

推荐答案

我们有相似的结构（一个非常大的应用程序）向您提议在这里的人，但没有控制器，服务等等捆绑为单个.js文件。相反，我们只是意见，服务和像所有捆绑成一个单独的模块分开我们的关注。因此，每个有意义的组件可能是这样的：

We have a similar structure (on a very large app) to the one you are proposing here, except don't have controllers,services and the like bundled up into single .js files. Instead we just separate our concerns with views, services and the like all bundled into a single module. So each meaningful component might looks like:

/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（['应用']） S中的整个事情。
我们使用 browserify 编译所有这些东西，它已经很好，到目前为止工作。

This is all bundled up into a single app module (named for our org). Then a simple boot module angular.bootstrap(['app'])s the whole thing. We use browserify to compile all this stuff and it has worked nicely so far.

这篇关于模块化AngularJS应用：一个或多个AngularJS模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！