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..

score 22 · Accepted Answer · edited Feb 21 '17 at 20:19

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...

hmmm thats exactly what isn't working.. I'm doing ```angular.module('myapp.newmodule').directive ``` and it fails with injection error while in another filer ```angular.module(`myapp.newmodule`,[]).directive ```is already working. declared, etc.. — alonisser, Dec 16 '13 at 14:32

score 13 · Answer 2 · edited Oct 25 '16 at 04:44

13

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>

edited Oct 25 '16 at 04:44

JackKalish

1,555
2
15
24

answered Dec 16 '13 at 14:37

Harish Kayarohanam

3,886
4
31
55

3

This works! But watch out you use brackets for dependencies only in one file (the main app file) file1: angular.module('module-name', [])... file2: angular.module('module-name')... otherwise it does not work. – Ruwen Nov 07 '16 at 08:47

score 5 · Answer 3 · edited Feb 21 '17 at 20:21

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.

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

3 Answers3

Linked