8

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.

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.

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.

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')

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

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 ?

falinsky
  • 7,229
  • 3
  • 32
  • 56
tomahim
  • 1,298
  • 2
  • 11
  • 29

1 Answers1

1

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

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.

SonOfNun
  • 957
  • 7
  • 11