Module creation

[dbroadhurst]

I'm wondering if the module section should also cover module creation. I generally have one name scope for each module but it can be inconvenient to add the dependancies. Options I've explored are;

1. One name scope for each module - inconvenient to added lots of dependancies
2. Ensure only one module does the creation and order the script tags - Hard to enforce when your build process does the script include. Also easy to break.
3. Create a master module that does creation and includes the related modules as dependancies - Dependancies are easier to handle but still need one scope per module
4. Create module definition file - Not desirable to split code across multiple files and you still need to make sure the definition file is loaded first
5. Use requireJS or some other library to manage modules - Not done any investigation with this but feels risky to introduce another module system

I would be interested if anyone has a strategy they feel happy to recommend

[zachlysobey]

Interesting discussion, I'd be curious to hear what people suggest here.

I am confused some of your terminology though:

• "module that does creation"
• "one name scope for each module"

I personally use a gulp plugin (gulp-angular-filesort) when I make my script bundle to ensure modules are loaded first.

I have one main module that includes many X-cutting dependencies, and all of my own 2nd tier modules. My modules further down the tree sometimes have their own 3rd party deps (not usually), and sometimes have sub-modules themselves.

I struggle to choose what granularity to keep the modules at, and often struggle to find the usefulness of multiple modules at all. I guess it would make it easier to extract a library? But that wouldn't be that tough anyway with find-replace, etc...

I've heard some suggest creating a module for each component -- an interesting approach, but would create something of an explosion in terms of file-count.

As far as using something like RequireJS, that seems like it might be a mistake to me. Multiple module systems can be confusing. Using ES6 modules would seem like a viable idea perhaps, but even that gets a bit sloppy feeling. See this project for using ES6 modules with webpack: https://github.com/Foxandxss/angular-webpack-workflow

[dbroadhurst]

To clarify

module creation = angular.module('module', []) <- square brackets

one name scope for each module

angular.module('module.sub1', []) angular.module('module.sub2', []) angular.module('module.sub3', []) etc.

My preference is to group related modules into one master module much like a library but the issue is how do I ensure the module that does the creation comes first. The frame work I use (NGBP) also promotes the idea of components that can be easily moved from one project to another by just dragging a folder from one project to another which I find has a lot of value.

[zachlysobey]

so, what do you mean by "Ensure only one module does the creation"?

and one name scope for each modules means you will never do angular.module('module.sub1.subsub1', [])? Does that mean your module trees are only ever 1 level deep? Or sub-sub modules still have only "scoped" to the top-level module.

(sorry if I'm being dense)

NGBP sounds pretty interesting. I might have to give that a whirl. It does make me a little nervous that the last commit was January of 2015 though...

[MarcLoupias]

Search for createInjector(modulesToLoad, strictDi) function in the angular source code.

When the injector is created, angular build a dependency tree with all modules. Then it prepare config & run execution :

• it sort the tree in order to execute the tree from the top to the root
• then it execute config function
• then run function

Add some .log in the angular source code is revealing experience :)

[dbroadhurst]

@zachlysobey

The general problem is

src1.js

angular.module('mymodule', []); <= create mymodule

src2.js

angular.module(mymodule') <= put following code into mymodule

if src2.js creates the module again using [] it overrides the version defined in src1.js. When I say "Ensure only one module does the creation" I am referring to avoiding both src1 and src2 doing the creation with [].

if src2.js is included in index.js before src1 then your get a runtime error because you are trying to use a module that hasn't been created

In simple terms the module that does the create with [] needs to be before any other module that might use the same module name. When you use a build system that does not allow you to define the order of the script tags (which is a good thing because I don't want to manage script tags) there's a risk that module creation can come after modules that use the same name.

It would be perfect if Angular simply merged rather than replaced when creating a new module with the same name but that's not the case.

[zachlysobey]

yea, thats certainly an issue you have to deal with.

As mentioned, I use a gulp plugin (gulp-angular-filesort) to ensure proper order of my scripts. Alternatively, (additionally?) you can name your module definition scripts myModule.module.js, and something in the build system to grab these by filename and ensure they are included first.

[johnpapa]

not sure i follow what the ask is. we have module setters/creators and module users/getters. These are listed in the guide and we name creators/setters with foo.modules.js.

What do you propose we add that would be helpful?