Angular: Understanding the DI array when using directives

Question

While trying to decide on which convention to use (chaining vs using a var), I noticed that

//this works
angular.module("myApp", []);
angular.module('myApp', ['myApp.myD', 'myApp.myD1']);

//while this does not work
var app = angular.module("myApp", ['myApp.myD', 'myApp.myD1']);//fails
var app = angular.module("myApp", []);//must use empty DI

So I figured (wrongly) that there must be a way to do this:

angular.module("myApp", []);
var myDs=new Array('myApp.myD', 'myApp.myD1');
angular.module('myApp', [myDs]);

As my list of directives grow, how do I best organize and manage them? Given a list of directives: myD, myD1..myDn, how do I go about including an array that represents all the directives in the DI array?

Fiddle1: As var Fiddle2: As chained modules

More: Embrace Conventions..they matter

EDIT: Cut and pasted from the angular seed

File One:

angular.module('myApp', [
   'ngRoute',
   'myApp.filters',
   'myApp.services',
   'myApp.directives',
   'myApp.controllers'
])......

File Two:

   angular.module('myApp.directives', []).
       directive('appVersion', ['version', function(version) {
       return function(scope, elm, attrs) {
           elm.text(version);
       };
   }]);

@Baba: Very familiar with both seeds and quoted articles thanks. Note angular seed has only one directive in it, while Josh's seed as far as I can see has no directives. My intent is not to get into the best practice debate but to understand is myApp.directives an array defined somewhere or just the name of the dependency array? Do I place each directive in its own file or all directives under file two?

Answer 1

I use Angular regularly on a rather large scale project. We have adopted the convention of defining modules through chaining without defining global vars. This has the advantage on not defining global objects on closure that might overlap namewise with other objects and create weird bugs.

You have Angular module structure, use it. There is no real benefit of using the other approach.

And as for your second question, about organizing your modules, you might know that there are two main methodologies in organizing angular modules, that being angular-seed and angular-boilerplate:

https://github.com/angular/angular-seed

http://joshdmiller.github.io/ng-boilerplate/#/home

In a large scale app it is my opinion that boilerplate would be a better way of organizing your modules. You can also check this blogs:

http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/

Answer 2

I found at least one working answer to this question thanks to meconroys reply. So each list of dependencies apparently is declared with its own name and stuck into the Dependency array.

In terms of looking for a scalable solution, the one file per "thing" will save most projects a lot of pain. Also note that me conroy states "Declaring a global variable in one file and expecting that to be readily available in another just doesn't work or could have unexpected results." So Baba no more var declarations for me. Excellent post. Deserves a lot more attention

// My Main Application File
angular.module('myApp',['myDirectives']);

// My Directives File
angular.module('myDirectives',[]);

// Directive One File
angular.module('myDirectives').directive('myD', function () {
    return {
        template: 'Similar to ng-include: tag will not work as element'
    };
});

//Directive Two File
angular.module('myDirectives').directive('myD1', function () {
    return {
        template: 'Similar to ng-include: tag will not work as element'
    };
});