Where to specify module dependencies?

Question

I'm following the standard practice of organizing my angular assets by feature; e.g. AngularJS Folder Structure and AngularJS Best Practices: Directory Structure.

Which file should I put my module / dependency declaration in?

I'm trying to solve the following problems:

I'd like to be able to sort my <script> references alphabetically for maintenance reasons, but I can't because that breaks my Angular bootstrap (for some modules).
I've tried keeping them in the alphabetically-first *.js file in the module, but I spend a lot of time as my app grows moving my dependency declarations around.
I often have to hunt around to find module declarations.
I end up staring at Angular's relatively uninformative module error too often for related reasons.
Regardless, attaching the module declaration to a specific controller seems to imply a direct correlation that doesn't exist.

Here's an example:

metric/
    _module.js // Should I create this file?
    detail-controller.js
    detail.html
    search-filter.js
    selector-controller.js
    selector-directive.js
    selector.html

Currently, for this module, that line of code exists in one of my module's controllers, you guess which one! ;)

As a possible solution that I'm not entirely happy with, should I put each module definition in its own tiny, one-line file?

angular.module('metric', ['lib', 'ngSanitize', 'ui.select', 'data']);

How do you do this? Am I missing some other clever or obvious solution?

p.s. as a related problem, if you feel like it, how do to track which components of your module are the source(s) of the dependency?

shannon · Accepted Answer · 2015-05-31T14:38:09.143

Now that I've been working with it for a while, and because I've started pre-compiling my javascript with gulp, the one-line module declaration file seems to be the best solution for me.

I name that file <special-character>module.js, so that it sorts visually and at compile-time to the top. Because my layout convention is one folder = one module, this works schematically. My special character is dash, YMMV. My individual .js file names don't show up in the production compiled version anyway.

It initially bothered me that there was a one-line file in my project, but now I appreciate it. It gets compiled in to my application javascript with gulp, so it's not a performance issue. Also, there's an obvious place to look for dependencies, clear trail in revision control logs of dependency changes, and simple process to document dependencies from my sources with my own custom tools.

score 0 · Answer 2 · answered May 29 '15 at 11:18

0

I would break it up even further.

metric/ 
    metric.js
    controllers/
        detail-controller.js
        selector-controller.js
    directives/
        selector-directive.js
    filters/
        search-filter.js
    templates/
        detail.html 
        selector.html

answered May 29 '15 at 11:18

Joshua Kelly

1,023
8
12

I feel ya brother. Still, I don't do this for a few reasons. First, I don't like having to navigate down to directories that frequently have only one file in. I prefer instead to have about 5-12 related files in a folder. Second, the angular 2 component convention/default will be to have a controller adjacent to a template where practical. That seems to be materializing as a pretty common convention with the community also, so I'm fine falling in-step. – shannon May 29 '15 at 11:54

Where to specify module dependencies?

2 Answers2