Angularjs - separating directive files, but staying on the same module

Question

I'm trying to separate a directive to another file, without having to declare a new module - not doing:

 angular.module('myapp.newmodule',[]).directive

but just :

angular.module('myapp.directives').directive(''

the myapp.directives module exists in another file and works fine. but when I try to use it in another file as shown above (without []) it fails.

following this answer It believe my approach should work, but for some reason it fails..

Solution 1

When you first declare a module it needs to have the dependency argument. Afterwards you can reference that same module using only the module name argument.

/* create module */
angular.module('myapp.newmodule',['ngRoute','ngResource']);

/* declare components of same module, note same name*/
angular.module('myapp.newmodule').directive....

If you want to create new modules, you need to inject them in the main ng-app module as dependencies.

/* main ng-app module , injects another module you created below*/
angular.module('myapp.newmodule',['ngRoute','ngResource','myUploader']);

/* new module, must have dependency argument */
angular.module('myUploader',[]).directive...

Solution 2

Wherever it is just refer to the module name (even in different files) and attach the directives. Javascript will just see what is attached to the module and not see which file it came from.

file1.js

angular.module('module-name')
    .directive('directive1', function () {
        return {
            ....
        };
    });

file2.js

angular.module('module-name')
    .directive('directive2', function () {
        return {
            ....
        };
    });

Only thing is don't forget to include both the js files in the view html file. say index.html

<script src="file1.js"></script>
<script src="file2.js"></script>

Solution 3

You don't need to chain them together, the link you posted has the answer at the bottom of the question.

In the first file you need to create your app module:

var myApp = angular.module('myApp ', []);

Then in each file you can attach additional things to myApp:

myApp.directive('ngValidate', ['$parse', function ($parse) {
  ....
}]);

Personally I never chain this stuff together, rather, I put it in separate files.