Menu
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..
994
AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
There are many other modules that come with angular out of the box. Examples are the Http-Client-Module, contains a very useful Http-Client (surprise!) and the Forms-Module that contains UI components and directives to HTML-Forms. As we have seen in the example above, we need to import a module first, before we can use it.
All modules (AngularJS core or 3rd party) that should be available to an application must be registered using this mechanism. Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module Module
Let's go! In Angular, everything is organized in modules. So even if you don't know what modules are and how to use them, you are already using them in your application. The most prominent of them is the AppModule. This module is the root module of your application and is absolutely necessary to run your application.
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... 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
