Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

like image 994
alonisser Avatar asked Dec 16 '13 13:12

alonisser


People also ask

What are the built-in directives in angular?

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.

What are the different angular modules?

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.

What is the difference between passing one argument to another in angular?

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

What is an appmodule in angular?

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.


2 Answers

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... 
like image 113
charlietfl Avatar answered Oct 27 '22 13:10

charlietfl


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> 
like image 34
Harish Kayarohanam Avatar answered Oct 27 '22 12:10

Harish Kayarohanam